diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 8ada98981f..fb0598fb90 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -145,302 +145,292 @@
 	<CenteredPage>
 		<Skeleton {loading} layout={[[{ h: 1.5, w: 40 }], 1, [{ h: 1, w: 30 }]]} />
 
-		<div class="relative w-full max-w-4xl mx-auto mt-16">
-			<div class="prose-sm mx-auto">
-				<div class="flex justify-between item-center">
-					<h1 class="mb-1">{defaultIfEmptyString(script.summary, script.path)}</h1>
+		<div class="prose-sm mx-auto mt-6">
+			<div class="flex flex-row w-full justify-between item-center">
+				<h1 class="mb-1 truncate">{defaultIfEmptyString(script.summary, script.path)}</h1>
 
-					<div class="flex flex-row-reverse gap-2 h-full">
-						<Button
-							href={`/scripts/run/${script.hash}`}
-							color="blue"
-							size="md"
-							startIcon={{ icon: faPlay }}
-						>
-							Run
-						</Button>
-						<Button
-							href={`/scripts/edit/${script.hash}?step=2`}
-							color="blue"
-							size="md"
-							startIcon={{ icon: faEdit }}
-							disabled={!can_write}
-						>
-							Edit
-						</Button>
-						{#if !topHash}
-							<Button
-								href={`/scripts/add?template=${script.path}`}
-								color="light"
-								size="md"
-								startIcon={{ icon: faCodeFork }}
-							>
-								Fork
-							</Button>
-						{/if}
-					</div>
-				</div>
-
-				<span class="text-lg font-semibold">{script.path}</span>
-
-				<div class="flex gap-2 flex-wrap">
-					<p>
-						Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
-					</p>
-					<div class="flex items-center gap-2">
-						<Badge color="dark-gray">
-							{truncateHash(script?.hash ?? '')}
-						</Badge>
-						<a href="#webhooks">
-							<Badge color="dark-blue">Webhooks</Badge>
-						</a>
-						{#if script?.is_template}
-							<Badge color="blue">Template</Badge>
-						{/if}
-						{#if script && script.kind !== 'script'}
-							<Badge color="blue">
-								{script?.kind}
-							</Badge>
-						{/if}
-						{#if deploymentInProgress}
-							<Badge
-								color="yellow"
-								icon={{ data: faSpinner, position: 'right', class: 'animate-spin' }}
-							>
-								Deployment in progress
-							</Badge>
-						{/if}
-						<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
-					</div>
-				</div>
-
-				<div class="flex my-4 gap-2 flex-wrap">
+				<div class="flex flex-row-reverse gap-2 h-full">
 					<Button
-						disabled={deploymentInProgress}
-						target="_blank"
-						href={scriptToHubUrl(
-							script.content,
-							script.summary,
-							script.description ?? '',
-							script.kind,
-							script.language,
-							script.schema,
-							script.language == 'deno' ? '' : script.lock
-						).toString()}
-						variant="border"
-						color="light"
-						size="xs"
-						startIcon={{ icon: faGlobe }}
+						href={`/scripts/run/${script.hash}`}
+						color="blue"
+						size="md"
+						startIcon={{ icon: faPlay }}
 					>
-						Publish to Hub
+						Run
 					</Button>
 					<Button
-						on:click={() => shareModal.openDrawer()}
-						variant="border"
-						color="light"
-						size="xs"
-						startIcon={{ icon: faShare }}
+						href={`/scripts/edit/${script.hash}?step=2`}
+						color="blue"
+						size="md"
+						startIcon={{ icon: faEdit }}
 						disabled={!can_write}
 					>
-						Share
+						Edit
 					</Button>
-					<Button
-						href="/schedule/add?path={script.path}"
-						variant="border"
-						color="light"
-						size="xs"
-						startIcon={{ icon: faCalendar }}
-					>
-						Schedule
-					</Button>
-					<Button
-						href={`/runs/${script.path}`}
-						size="xs"
-						startIcon={{ icon: faList }}
-						color="light"
-						variant="border"
-					>
-						View runs
-					</Button>
-					{#if Array.isArray(script.parent_hashes) && script.parent_hashes.length > 0}
-						<ButtonPopup
-							color="dark"
-							variant="contained"
-							size="xs"
-							startIcon={{ icon: faArrowLeft }}
-							href="/scripts/get/{script.parent_hashes[0]}"
+					{#if !topHash}
+						<Button
+							href={`/scripts/add?template=${script.path}`}
+							variant="border"
+							size="md"
+							startIcon={{ icon: faCodeFork }}
 						>
-							<svelte:fragment slot="main"
-								>Previous version ({script.parent_hashes.length})</svelte:fragment
-							>
-
-							{#each script.parent_hashes as hash}
-								<ButtonPopupItem href="/scripts/get/{hash}" btnClasses="!m-0">
-									{hash}
-								</ButtonPopupItem>
-							{/each}
-						</ButtonPopup>
+							Fork
+						</Button>
 					{/if}
 				</div>
+			</div>
 
-				{#if script.lock_error_logs || topHash || script.archived || script.deleted}
-					<div class="flex flex-col gap-2 my-2">
-						{#if script.lock_error_logs}
-							<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
-								<p class="font-bold">Error deploying this script</p>
-								<p
-									>This script has not been deployed successfully because of the following errors:</p
-								>
-								<pre class="w-full text-xs mt-2 whitespace-pre-wrap">{script.lock_error_logs}</pre>
-							</div>
-						{/if}
-						{#if topHash}
-							<Alert type="warning" title="Not HEAD">
-								This hash is not HEAD (latest non-archived version at this path) :
-								<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
-							</Alert>
-						{/if}
-						{#if script.archived && !topHash}
-							<Alert type="error" title="Archived">This version was archived</Alert>
-						{/if}
-						{#if script.deleted}
-							<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
-								<p class="font-bold">Deleted</p>
-								<p>The content of this script was deleted (by an admin, no less)</p>
-							</div>
-						{/if}
-					</div>
+			<span class="text-lg font-semibold">{script.path}</span>
+
+			<div class="flex flex-row gap-x-2 flex-wrap">
+				<p>
+					Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
+				</p>
+				<div class="flex items-center gap-2">
+					<Badge color="dark-gray">
+						{truncateHash(script?.hash ?? '')}
+					</Badge>
+					<a href="#webhooks">
+						<Badge color="dark-blue">Webhooks</Badge>
+					</a>
+					{#if script?.is_template}
+						<Badge color="blue">Template</Badge>
+					{/if}
+					{#if script && script.kind !== 'script'}
+						<Badge color="blue">
+							{script?.kind}
+						</Badge>
+					{/if}
+					{#if deploymentInProgress}
+						<Badge
+							color="yellow"
+							icon={{ data: faSpinner, position: 'right', class: 'animate-spin' }}
+						>
+							Deployment in progress
+						</Badge>
+					{/if}
+					<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+				</div>
+			</div>
+
+			<div class="flex gap-2 flex-wrap">
+				<Button
+					disabled={deploymentInProgress}
+					target="_blank"
+					href={scriptToHubUrl(
+						script.content,
+						script.summary,
+						script.description ?? '',
+						script.kind,
+						script.language,
+						script.schema,
+						script.language == 'deno' ? '' : script.lock
+					).toString()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faGlobe }}
+				>
+					Publish to Hub
+				</Button>
+				<Button
+					on:click={() => shareModal.openDrawer()}
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faShare }}
+					disabled={!can_write}
+				>
+					Share
+				</Button>
+				<Button
+					href="/schedule/add?path={script.path}"
+					variant="border"
+					color="light"
+					size="xs"
+					startIcon={{ icon: faCalendar }}
+				>
+					Schedule
+				</Button>
+				<Button
+					href={`/runs/${script.path}`}
+					size="xs"
+					startIcon={{ icon: faList }}
+					color="light"
+					variant="border"
+				>
+					View runs
+				</Button>
+				{#if Array.isArray(script.parent_hashes) && script.parent_hashes.length > 0}
+					<ButtonPopup
+						color="dark"
+						variant="contained"
+						size="xs"
+						startIcon={{ icon: faArrowLeft }}
+						href="/scripts/get/{script.parent_hashes[0]}"
+					>
+						<svelte:fragment slot="main"
+							>Previous version ({script.parent_hashes.length})</svelte:fragment
+						>
+
+						{#each script.parent_hashes as hash}
+							<ButtonPopupItem href="/scripts/get/{hash}" btnClasses="!m-0">
+								{hash}
+							</ButtonPopupItem>
+						{/each}
+					</ButtonPopup>
 				{/if}
+			</div>
 
-				<div>
-					<h3>Description</h3>
-					<SvelteMarkdown source={defaultIfEmptyString(script.description, 'No description')} />
+			{#if script.lock_error_logs || topHash || script.archived || script.deleted}
+				<div class="flex flex-col gap-2 mb-2">
+					{#if script.lock_error_logs}
+						<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
+							<p class="font-bold">Error deploying this script</p>
+							<p>This script has not been deployed successfully because of the following errors:</p>
+							<pre class="w-full text-xs mt-2 whitespace-pre-wrap">{script.lock_error_logs}</pre>
+						</div>
+					{/if}
+					{#if topHash}
+						<Alert type="warning" title="Not HEAD">
+							This hash is not HEAD (latest non-archived version at this path) :
+							<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
+						</Alert>
+					{/if}
+					{#if script.archived && !topHash}
+						<Alert type="error" title="Archived">This version was archived</Alert>
+					{/if}
+					{#if script.deleted}
+						<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
+							<p class="font-bold">Deleted</p>
+							<p>The content of this script was deleted (by an admin, no less)</p>
+						</div>
+					{/if}
 				</div>
+			{/if}
 
-				<div>
-					<h3>
-						Arguments JSON schema
+			<div class="max-w-2xl box mt-6">
+				<SvelteMarkdown source={defaultIfEmptyString(script.description, 'No description')} />
+			</div>
 
-						<Tooltip>
-							The jsonschema defines the constraints that the payload must respect to be compatible
-							with the input parameters of this script. The UI form is generated automatically from
-							the script jsonschema. See
-							<a href="https://json-schema.org/" class="text-blue-500">
-								jsonschema documentation
-							</a>
-						</Tooltip>
-					</h3>
-					<Skeleton {loading} layout={[[15]]} />
-					<SchemaViewer schema={script.schema} />
-				</div>
+			<div class="max-w-2xl">
+				<h3>
+					Arguments JSON schema
 
-				<div>
-					<h3>Code</h3>
+					<Tooltip>
+						The jsonschema defines the constraints that the payload must respect to be compatible
+						with the input parameters of this script. The UI form is generated automatically from
+						the script jsonschema. See
+						<a href="https://json-schema.org/" class="text-blue-500"> jsonschema documentation </a>
+					</Tooltip>
+				</h3>
+				<Skeleton {loading} layout={[[15]]} />
+				<SchemaViewer schema={script.schema} />
+			</div>
 
-					<Skeleton {loading} layout={[[20]]} />
+			<div>
+				<h3>Code</h3>
 
-					<Tabs selected="code">
-						<Tab value="code">Code</Tab>
-						<Tab value="dependencies">Dependencies lock file</Tab>
-						<svelte:fragment slot="content">
-							<TabContent value="code">
-								<div class="border rounded-sm mt-2">
-									<HighlightCode language={script.language} code={script.content} />
+				<Skeleton {loading} layout={[[20]]} />
+
+				<Tabs selected="code">
+					<Tab value="code">Code</Tab>
+					<Tab value="dependencies">Dependencies lock file</Tab>
+					<svelte:fragment slot="content">
+						<TabContent value="code">
+							<div class="border rounded-sm mt-2">
+								<HighlightCode language={script.language} code={script.content} />
+							</div>
+						</TabContent>
+						<TabContent value="dependencies">
+							<div class="border rounded-sm mt-2">
+								{#if script?.lock}
+									<pre>{script.lock}</pre>
+								{:else}
+									<p>There is no lock file for this script</p>
+								{/if}
+							</div>
+						</TabContent>
+					</svelte:fragment>
+				</Tabs>
+			</div>
+
+			<div class="max-w-2xl">
+				<h3 id="webhooks">
+					Webhooks
+					<Tooltip>
+						To trigger this script with a webhook, do a POST request to the endpoints below. Scripts
+						are not public and can only be run by users with at least view rights on them. You will
+						need to pass a bearer token to authentify as a user. You can either pass it as a Bearer
+						token or as query arg `?token=XXX`.
+						<a href="https://docs.windmill.dev/docs/getting_started/webhooks" class="text-blue-500">
+							See docs
+						</a>
+					</Tooltip>
+				</h3>
+				<Skeleton {loading} layout={[[8.5]]} />
+				<Tabs selected="uuid">
+					<Tab value="uuid">UUID</Tab>
+					<Tab value="result">Result</Tab>
+					<svelte:fragment slot="content">
+						{#each Object.keys(webhooks) as key}
+							<TabContent value={key}>
+								<ul>
+									{#each Object.keys(webhooks[key]) as type}
+										{@const url = webhooks[key][type]}
+										<li class="flex justify-between items-center mt-2">
+											<a
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(url)
+												}}
+												href={$page.url.protocol + '//' + url}
+												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+											>
+												{url}
+												<span class="text-gray-700 ml-2">
+													<Icon data={faClipboard} />
+												</span>
+											</a>
+											<Badge color="dark-gray" capitalize>
+												{type}
+											</Badge>
+										</li>
+									{/each}
+								</ul>
+								<div class="flex flex-row-reverse mt-2">
+									<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
 								</div>
 							</TabContent>
-							<TabContent value="dependencies">
-								<div class="border rounded-sm mt-2">
-									{#if script?.lock}
-										<pre>{script.lock}</pre>
-									{:else}
-										<p>There is no lock file for this script</p>
-									{/if}
-								</div>
-							</TabContent>
-						</svelte:fragment>
-					</Tabs>
-				</div>
-
-				<div>
-					<h3 id="webhooks">
-						Webhooks
-						<Tooltip>
-							To trigger this script with a webhook, do a POST request to the endpoints below.
-							Scripts are not public and can only be run by users with at least view rights on them.
-							You will need to pass a bearer token to authentify as a user. You can either pass it
-							as a Bearer token or as query arg `?token=XXX`.
-							<a
-								href="https://docs.windmill.dev/docs/getting_started/webhooks"
-								class="text-blue-500"
-							>
-								See docs
-							</a>
-						</Tooltip>
-					</h3>
-					<Skeleton {loading} layout={[[8.5]]} />
-					<Tabs selected="uuid">
-						<Tab value="uuid">UUID</Tab>
-						<Tab value="result">Result</Tab>
-						<svelte:fragment slot="content">
-							{#each Object.keys(webhooks) as key}
-								<TabContent value={key}>
-									<ul>
-										{#each Object.keys(webhooks[key]) as type}
-											{@const url = webhooks[key][type]}
-											<li class="flex justify-between items-center mt-2">
-												<a
-													on:click={(e) => {
-														e.preventDefault()
-														copyToClipboard(url)
-													}}
-													href={$page.url.protocol + '//' + url}
-													class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-												>
-													{url}
-													<span class="text-gray-700 ml-2">
-														<Icon data={faClipboard} />
-													</span>
-												</a>
-												<Badge color="dark-gray" capitalize>
-													{type}
-												</Badge>
-											</li>
-										{/each}
-									</ul>
-									<div class="flex flex-row-reverse mt-2">
-										<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
-									</div>
-								</TabContent>
-							{/each}
-						</svelte:fragment>
-					</Tabs>
-				</div>
-				<div>
-					<h3>Danger zone</h3>
-					<div class="flex gap-2">
-						<Button
-							size="xs"
-							on:click={() => {
-								script?.hash && deleteScript(script.hash)
-							}}
-							color="red"
-							variant="contained"
-							startIcon={{ icon: faTrash }}
-						>
-							Delete
-						</Button>
-						<Button
-							size="xs"
-							on:click={() => {
-								script?.hash && archiveScript(script.hash)
-							}}
-							color="red"
-							variant="border"
-							startIcon={{ icon: faArchive }}
-						>
-							Archive
-						</Button>
-					</div>
+						{/each}
+					</svelte:fragment>
+				</Tabs>
+			</div>
+			<div>
+				<h3>Danger zone</h3>
+				<div class="flex gap-2">
+					<Button
+						size="xs"
+						on:click={() => {
+							script?.hash && deleteScript(script.hash)
+						}}
+						color="red"
+						variant="contained"
+						startIcon={{ icon: faTrash }}
+					>
+						Delete
+					</Button>
+					<Button
+						size="xs"
+						on:click={() => {
+							script?.hash && archiveScript(script.hash)
+						}}
+						color="red"
+						variant="border"
+						startIcon={{ icon: faArchive }}
+					>
+						Archive
+					</Button>
 				</div>
 			</div>
 		</div>