padding

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -201,7 +201,7 @@
 			/>
 		</div>
 		<div
-			class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute"
+			class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute bg-white dark:bg-gray-900"
 		>
 		<button
 		type="button"

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -272,10 +272,10 @@ print(output.choices[0].message)`,
 	</div>
 
 	{#each snippetsByLanguage[selectedLanguage] as { label, code, language }}
-		<div class="flex items-center justify-between px-4 pb-4 pt-6">
+		<div class="flex items-center justify-between px-2 md:px-4 pb-4 pt-6">
 			<h2 class="font-semibold">{label}</h2>
 			<button
-				class="flex items-center gap-x-1.5 rounded-md bg-gray-200 px-1.5 py-0.5 text-sm transition dark:bg-gray-950"
+				class="flex items-center gap-x-1.5 rounded-md bg-gray-200 px-1.5 py-0.5 text-sm transition dark:bg-gray-950/80"
 				on:click={e => {
 					const el = e.currentTarget;
 					el.classList.add("text-green-500");