more layout improvements

src/lib/components/app/code-snippet/code-snippet.svelte

@@ -16,51 +16,59 @@
 
 	let wasCopied = $state(false);
 
+	const roundedPre = copy || download ? 'rounded-b-lg' : 'rounded-lg';
+
 	async function copyToClipboard() {
 		await navigator.clipboard.writeText(data);
 		wasCopied = true;
 	}
 </script>
 
-<div class="relative flex-grow overflow-x-hidden rounded-lg bg-accent">
-	<div class="flex items-start overflow-x-auto p-2">
-		<pre><code>{data}</code></pre>
-		{#if copy || download}
-			<!--Copy button-->
-			<!--Flex reverse for peer hover to work properly-->
-			<div class="absolute right-2 flex flex-col gap-2">
+<div class="flex max-w-full flex-grow flex-col rounded-lg bg-accent">
+	{#if copy || download}
+		<!--Copy and download buttons-->
+		<div class="b flex flex-wrap items-center justify-between gap-4 rounded-t-lg p-2">
+			Configuration
+			<div class="flex gap-2">
 				{#if copy}
-					<div class="flex flex-row-reverse items-center gap-1">
-						<Button
-							class="peer size-10 p-2"
-							onclick={copyToClipboard}
-							onmouseleave={() => (wasCopied = false)}
-						>
-							<LucideClipboardCopy />
-						</Button>
-						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
+					<Button
+						class="action-button group"
+						onclick={copyToClipboard}
+						onmouseleave={() => (wasCopied = false)}
+					>
+						<LucideClipboardCopy />
+						<span class="group-hover:block">
 							{wasCopied ? 'Copied' : 'Copy to clipboard'}
 						</span>
-					</div>
+					</Button>
 				{/if}
 
 				{#if download}
-					<div class="flex flex-row-reverse items-center gap-1">
-						<a
-							class="peer contents"
-							href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data)}`}
-							download={filename}
-						>
-							<Button class="size-10 p-2">
-								<LucideDownload />
-							</Button>
-						</a>
-						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
-							Download
-						</span>
-					</div>
+					<a
+						class="contents"
+						href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data)}`}
+						download={filename}
+					>
+						<Button class="action-button group">
+							<LucideDownload />
+							<span class="group-hover:block">Download</span>
+						</Button>
+					</a>
 				{/if}
 			</div>
-		{/if}
+		</div>
+	{/if}
+	<div class="bg-surface flex items-start overflow-x-auto {roundedPre} p-2">
+		<pre><code>{data}</code></pre>
 	</div>
 </div>
+
+<style>
+	:global(.action-button) {
+		@apply relative size-auto p-2;
+	}
+
+	:global(.action-button > span) {
+		@apply absolute bottom-full mb-3 hidden rounded-lg bg-muted p-2 text-xs text-foreground;
+	}
+</style>