remove provider select transparent bg && add debug menu

src/app.css

@@ -26,3 +26,8 @@
 html {
 	font-size: 15px;
 }
+
+@utility abs-x-center {
+	left: 50%;
+	@apply -translate-x-1/2;
+}

src/lib/components/DebugMenu.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { dev } from "$app/environment";
+	import { createPopover } from "@melt-ui/svelte";
+
+	let innerWidth: number;
+	let innerHeight: number;
+	let isDarkMode: boolean;
+
+	function toggleTheme() {
+		document.body.classList.toggle("dark");
+	}
+
+	const {
+		elements: { trigger, content },
+	} = createPopover();
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight />
+
+{#if dev}
+	<div class="abs-x-center fixed bottom-0 z-50">
+		<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...$trigger} use:trigger>
+			Debug
+		</button>
+
+		<div
+			class="mb-2 w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+			{...$content}
+			use:content
+		>
+			<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3>
+
+			<div class="space-y-3">
+				<div class="text-sm dark:text-gray-300">
+					<p>Viewport: {innerWidth}x{innerHeight}</p>
+					<p>Environment: {import.meta.env.MODE}</p>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<button
+						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+						on:click={toggleTheme}
+					>
+						Toggle Theme
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* Add any additional styles here */
+</style>
+

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -87,7 +87,7 @@
 		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
 	</button>
 
-	<div {...$menu} use:menu class="rounded-lg border bg-gray-100/80 dark:border-gray-700 dark:bg-gray-800">
+	<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
 		{#each conversation.model.inferenceProviderMapping as { provider } (provider)}
 			<button {...$option({ value: provider })} use:option class="group block w-full p-1 text-sm dark:text-white">
 				<div

src/routes/+layout.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import "../app.css";
+	import DebugMenu from "$lib/components/DebugMenu.svelte";
 </script>
 
 <slot />
+<DebugMenu />
+