ux nits

frontend/src/lib/components/ScriptBuilder.svelte

@@ -462,8 +462,8 @@
 	</Drawer>
 
 	<div class="flex flex-col h-screen">
-		<div class="flex flex-col w-full px-2 py-1 border-b shadow-sm">
-			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center px-2">
+		<div class="flex h-full max-h-12 items-center pl-2.5 pr-6 overflow-hidden border-b shadow-sm">
+			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
 				<div class="min-w-64 w-full max-w-md">
 					<input
 						type="text"
@@ -536,16 +536,18 @@
 					</Button>
 					<Button
 						loading={loadingDraft}
-						size="sm"
+						size="xs"
 						startIcon={{ icon: faSave }}
 						on:click={() => saveDraft()}
 					>
-						Save draft&nbsp;<Kbd small>{getModifierKey()}</Kbd>
+						<span class="hidden sm:flex">
+							Save draft&nbsp;<Kbd small>{getModifierKey()}</Kbd>
+						</span>
 						<Kbd small>S</Kbd>
 					</Button>
 					<Button
 						loading={loadingSave}
-						size="sm"
+						size="xs"
 						startIcon={{ icon: faSave }}
 						on:click={() => editScript()}
 						dropdownItems={initialPath != '' ? computeDropdownItems : undefined}