responsiveness

src/lib/components/billing-indicator.svelte

@@ -4,16 +4,17 @@
 	import IconGroup from "~icons/carbon/group";
 	import IconWarning from "~icons/carbon/warning";
 	import IconCheckmark from "~icons/carbon/checkmark";
+	import Tooltip from "./tooltip.svelte";
 
 	interface Props {
 		showModal?: () => void;
+		iconOnly?: boolean;
 	}
 
-	const { showModal }: Props = $props();
+	const { showModal, iconOnly = false }: Props = $props();
 </script>
 
-<button onclick={showModal} class="btn-sm">
-	<!-- Avatar or Icon -->
+{#snippet icon()}
 	{#if billing.organization && billing.organizationInfo?.avatar && billing.isValid}
 		<img src={billing.organizationInfo.avatar} alt={billing.displayName} class="size-4 rounded-full" />
 	{:else if billing.organization}
@@ -21,10 +22,9 @@
 	{:else}
 		<IconUser class="size-4" />
 	{/if}
+{/snippet}
 
-	<span class="max-w-32 truncate">{billing.displayName}</span>
-
-	<!-- Status indicator for organization -->
+{#snippet statusIndicator()}
 	{#if billing.organization}
 		{#if billing.validating}
 			<div class="size-3 animate-spin rounded-full border border-yellow-600 border-t-transparent"></div>
@@ -34,4 +34,22 @@
 			<IconWarning class="size-3 text-red-600 dark:text-red-400" />
 		{/if}
 	{/if}
-</button>
+{/snippet}
+
+{#if iconOnly}
+	<Tooltip>
+		{#snippet trigger(tooltip)}
+			<button onclick={showModal} class="btn-sm size-8 shrink-0 p-0!" {...tooltip.trigger}>
+				{@render icon()}
+				{@render statusIndicator()}
+			</button>
+		{/snippet}
+		{billing.displayName}
+	</Tooltip>
+{:else}
+	<button onclick={showModal} class="btn-sm">
+		{@render icon()}
+		<span class="max-w-32 truncate">{billing.displayName}</span>
+		{@render statusIndicator()}
+	</button>
+{/if}

src/lib/components/inference-playground/model-selector.svelte

@@ -50,7 +50,8 @@
 		<div class="flex items-center gap-2 overflow-hidden">
 			<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
 			<div class="overflow-hidden">
-				<span class="text-xs text-gray-500 dark:text-gray-400">{nameSpace}/</span>
+				<!-- Hide org name on mobile -->
+				<span class="hidden text-xs text-gray-500 md:inline dark:text-gray-400">{nameSpace}/</span>
 				<span class="truncate font-medium">{modelName}</span>
 			</div>
 		</div>

src/lib/components/inference-playground/playground.svelte

@@ -30,6 +30,8 @@
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectTreeSidebar from "./project-tree-sidebar.svelte";
 	import ProviderSelect from "./provider-select.svelte";
+	import IconMenu from "~icons/carbon/menu";
+	import IconProvider from "../icon-provider.svelte";
 
 	// LocalStorage keys
 	const SIDEBAR_COLLAPSED_KEY = "playground:sidebar:collapsed";
@@ -53,9 +55,11 @@
 	let viewCode = $state(false);
 	let sidebarCollapsed = $state(get_initial_collapsed());
 	let sidebarWidth = $state(get_initial_width());
+	let mobileSidebarOpen = $state(false);
 	let billingModalOpen = $state(false);
 	let selectCompareModelOpen = $state(false);
 	let settingsPopoverOpen = $state(false);
+	let providerPopoverOpen = $state(false);
 
 	const compareActive = $derived(conversations.active.length === 2);
 
@@ -91,6 +95,14 @@
 			settingsPopoverOpen = value;
 		},
 	});
+
+	// Provider popover (mobile)
+	const providerPopover = new Popover({
+		open: () => providerPopoverOpen,
+		onOpenChange: value => {
+			providerPopoverOpen = value;
+		},
+	});
 </script>
 
 <div
@@ -99,44 +111,78 @@
 		"dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]",
 	]}
 >
-	<!-- Project tree sidebar -->
-	<ProjectTreeSidebar
-		collapsed={sidebarCollapsed}
-		width={sidebarWidth}
-		onToggleCollapse={toggle_sidebar_collapsed}
-		onWidthChange={handle_sidebar_width_change}
-	/>
+	<!-- Project tree sidebar (hidden on mobile unless open) -->
+	<div class="max-md:hidden">
+		<ProjectTreeSidebar
+			collapsed={sidebarCollapsed}
+			width={sidebarWidth}
+			onToggleCollapse={toggle_sidebar_collapsed}
+			onWidthChange={handle_sidebar_width_change}
+		/>
+	</div>
+
+	<!-- Mobile sidebar (overlay) -->
+	<div class="md:hidden">
+		<ProjectTreeSidebar mobileOpen={mobileSidebarOpen} onMobileClose={() => (mobileSidebarOpen = false)} />
+	</div>
 
 	<!-- Main content area -->
 	<div class="relative flex flex-1 flex-col overflow-hidden">
 		<!-- Top bar -->
 		<header
-			class="flex justify-between border-b border-gray-200 bg-white px-4 py-2 dark:border-gray-800 dark:bg-gray-900"
+			class="flex items-center gap-2 border-b border-gray-200 bg-white px-2 py-2 md:px-4 dark:border-gray-800 dark:bg-gray-900"
 		>
-			<!-- Left side: Model selector, provider selector, and compare -->
-			<div class="flex items-start gap-3">
-				{#if !compareActive && conversations.active[0]}
-					<!-- Model and provider stacked vertically with fixed width -->
-					<div class="flex w-72 flex-col gap-1">
-						<ModelSelector conversation={conversations.active[0]} compact />
-						{#if isHFModel(conversations.active[0].model)}
+			<!-- Mobile menu button -->
+			<button
+				class="btn-sm size-8 shrink-0 p-0! md:hidden"
+				onclick={() => (mobileSidebarOpen = true)}
+				aria-label="Open menu"
+			>
+				<IconMenu class="size-4" />
+			</button>
+
+			{#if !compareActive && conversations.active[0]}
+				<!-- Model and provider stacked vertically on desktop -->
+				<div class="flex min-w-0 flex-1 flex-col gap-1 md:w-72 md:flex-none">
+					<ModelSelector conversation={conversations.active[0]} compact />
+					<!-- Desktop: Provider selector below model -->
+					{#if isHFModel(conversations.active[0].model)}
+						<div class="hidden md:block">
 							<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 							<ProviderSelect conversation={conversations.active[0] as any} compact />
-						{/if}
-					</div>
-					<button class="btn-xs" onclick={() => (selectCompareModelOpen = true)}>
-						<IconCompare class="size-4" />
-						Compare
-					</button>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Desktop: Compare button -->
+				<button class="btn-xs self-start max-md:hidden" onclick={() => (selectCompareModelOpen = true)}>
+					<IconCompare class="size-4" />
+					Compare
+				</button>
+			{/if}
+
+			<!-- Right side actions -->
+			<div class="ml-auto flex shrink-0 items-center gap-1 md:gap-2">
+				<!-- Mobile: Provider popover button -->
+				{#if !compareActive && conversations.active[0] && isHFModel(conversations.active[0].model)}
+					{@const activeConv = conversations.active[0]}
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<button
+								{...providerPopover.trigger}
+								class="btn-sm size-8 shrink-0 p-0! md:hidden"
+								aria-label="Provider settings"
+								{...tooltip.trigger}
+							>
+								<IconProvider provider={activeConv.data.provider ?? "auto"} />
+							</button>
+						{/snippet}
+						Provider
+					</Tooltip>
 				{/if}
-			</div>
 
-			<!-- Right side: Actions -->
-			<div class="flex items-center gap-2">
-				<!-- Checkpoints menu -->
 				<CheckpointsMenu />
 
-				<!-- Settings button with popover -->
 				<Tooltip>
 					{#snippet trigger(tooltip)}
 						<button
@@ -151,14 +197,19 @@
 					Settings
 				</Tooltip>
 
-				<!-- Share button -->
-				<button onclick={() => projects.current && showShareModal(projects.current)} class="btn-sm">
+				<!-- Desktop: Share button -->
+				<button onclick={() => projects.current && showShareModal(projects.current)} class="btn-sm max-md:hidden">
 					<IconShare class="size-4" />
-					Share
+					<span class="max-lg:hidden">Share</span>
 				</button>
 
-				<!-- Billing indicator -->
-				<BillingIndicator showModal={() => (billingModalOpen = true)} />
+				<!-- Billing: icon only on mobile -->
+				<div class="md:hidden">
+					<BillingIndicator showModal={() => (billingModalOpen = true)} iconOnly />
+				</div>
+				<div class="hidden md:block">
+					<BillingIndicator showModal={() => (billingModalOpen = true)} />
+				</div>
 			</div>
 		</header>
 
@@ -191,9 +242,9 @@
 
 			<!-- Bottom bar -->
 			<div
-				class="relative mt-2 flex h-12 shrink-0 items-center justify-between border-t border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900"
+				class="relative mt-2 flex h-12 shrink-0 items-center justify-between gap-2 border-t border-gray-200 bg-white px-2 md:px-4 dark:border-gray-800 dark:bg-gray-900"
 			>
-				<div class="flex items-center gap-4">
+				<div class="flex items-center gap-2 md:gap-4">
 					<Tooltip>
 						{#snippet trigger(tooltip)}
 							<button
@@ -209,8 +260,8 @@
 						Clear conversation
 					</Tooltip>
 
-					<!-- Footer links - moved here to avoid overlap -->
-					<div class="flex items-center gap-2 text-xs max-md:hidden">
+					<!-- Footer links (hidden on mobile) -->
+					<div class="flex items-center gap-2 text-xs max-lg:hidden">
 						<a
 							target="_blank"
 							href="https://huggingface.co/docs/inference-providers/tasks/chat-completion"
@@ -239,7 +290,7 @@
 					</div>
 				</div>
 
-				<!-- Stats in center -->
+				<!-- Stats in center (hidden on smaller screens) -->
 				<div
 					class="pointer-events-none absolute inset-x-0 flex items-center justify-center gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
 				>
@@ -253,7 +304,7 @@
 				<div class="flex items-center gap-2">
 					<button type="button" onclick={() => (viewCode = !viewCode)} class="btn h-[28px]! px-2!">
 						<IconCode />
-						{!viewCode ? "View Code" : "Hide Code"}
+						<span class="max-sm:hidden">{!viewCode ? "View Code" : "Hide Code"}</span>
 					</button>
 				</div>
 			</div>
@@ -261,6 +312,18 @@
 	</div>
 </div>
 
+<!-- Provider popover content (mobile) -->
+<div
+	{...providerPopover.content}
+	class="z-50 w-64 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+>
+	<h3 class="mb-3 text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">Provider</h3>
+	{#if conversations.active[0] && isHFModel(conversations.active[0].model)}
+		<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+		<ProviderSelect conversation={conversations.active[0] as any} />
+	{/if}
+</div>
+
 <!-- Settings popover content -->
 <div
 	{...settingsPopover.content}

src/lib/components/inference-playground/project-tree-sidebar.svelte

@@ -15,7 +15,7 @@
 	import IconEdit from "~icons/carbon/edit";
 	import IconDelete from "~icons/carbon/trash-can";
 	import IconHistory from "~icons/carbon/recently-viewed";
-	import IconSidebarCollapse from "~icons/carbon/side-panel-close";
+	import IconClose from "~icons/carbon/close";
 	import IconSidebarExpand from "~icons/carbon/side-panel-open";
 	import { prompt } from "../prompts.svelte";
 	import Tooltip from "../tooltip.svelte";
@@ -34,12 +34,21 @@
 
 	interface Props {
 		collapsed?: boolean;
+		mobileOpen?: boolean;
 		width?: number;
 		onToggleCollapse?: () => void;
+		onMobileClose?: () => void;
 		onWidthChange?: (width: number) => void;
 	}
 
-	let { collapsed = false, width = DEFAULT_WIDTH, onToggleCollapse, onWidthChange }: Props = $props();
+	let {
+		collapsed = false,
+		mobileOpen = false,
+		width = DEFAULT_WIDTH,
+		onToggleCollapse,
+		onMobileClose,
+		onWidthChange,
+	}: Props = $props();
 
 	// Resize state
 	let is_resizing = $state(false);
@@ -182,10 +191,24 @@
 	}
 </script>
 
+<!-- Mobile overlay backdrop -->
+{#if mobileOpen}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-40 bg-black/50 md:hidden"
+		onclick={onMobileClose}
+		onkeydown={e => e.key === "Escape" && onMobileClose?.()}
+	></div>
+{/if}
+
 <aside
 	class={cn(
-		"relative flex h-full flex-col overflow-hidden border-r border-gray-200 bg-gray-50/50 dark:border-gray-800 dark:bg-gray-900/50",
-		!is_resizing && "transition-[width] duration-200 ease-out",
+		"relative flex h-full flex-col overflow-hidden border-r border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900",
+		!is_resizing && "transition-[width,transform] duration-200 ease-out",
+		// Desktop: normal sidebar behavior
+		"max-md:fixed max-md:top-0 max-md:left-0 max-md:z-50 max-md:w-72!",
+		// Mobile: slide in/out
+		mobileOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full",
 	)}
 	style="width: {collapsed ? COLLAPSED_WIDTH : width}px"
 >
@@ -206,19 +229,28 @@
 					{/snippet}
 					New project
 				</Tooltip>
+				<!-- Desktop: collapse button -->
 				<Tooltip>
 					{#snippet trigger(tooltip)}
 						<button
 							onclick={onToggleCollapse}
-							class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+							class="hidden rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 md:block dark:hover:bg-gray-700 dark:hover:text-gray-200"
 							aria-label="Collapse sidebar"
 							{...tooltip.trigger}
 						>
-							<IconSidebarCollapse class="size-4" />
+							<IconClose class="size-4" />
 						</button>
 					{/snippet}
 					Collapse sidebar
 				</Tooltip>
+				<!-- Mobile: close button -->
+				<button
+					onclick={onMobileClose}
+					class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 md:hidden dark:hover:bg-gray-700 dark:hover:text-gray-200"
+					aria-label="Close sidebar"
+				>
+					<IconClose class="size-4" />
+				</button>
 			</div>
 		</div>
 
@@ -285,12 +317,12 @@
 		</div>
 	{/if}
 
-	<!-- Resize handle -->
+	<!-- Resize handle (desktop only) -->
 	{#if !collapsed}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class={cn(
-				"absolute top-0 right-0 h-full w-1 cursor-ew-resize transition-colors",
+				"absolute top-0 right-0 h-full w-1 cursor-ew-resize transition-colors max-md:hidden",
 				"hover:bg-blue-400 dark:hover:bg-blue-500",
 				is_resizing && "bg-blue-500 dark:bg-blue-400",
 			)}