quick layout fix on mobile

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -324,10 +324,10 @@
 	</div>
 	<div class="relative divide-y divide-gray-200 dark:divide-gray-800" on:keydown={onKeydown}>
 		<div
-			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 *:w-full md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
+			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
 			{#each session.conversations as conversation, conversationIdx}
-				<div>
+				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
 							{models}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -55,8 +55,8 @@
 
 <div
 	class="{conversationIdx === 0
-		? 'mr-4'
-		: 'mx-4'} flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+		? 'mr-4 max-sm:ml-4'
+		: 'mx-4'} flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 >
 	<Avatar orgName={nameSpace} size="md" />
 	<button class="!flex-1 self-stretch text-left hover:underline" on:click={() => (modelSelectorOpen = true)}