refac: styling

src/lib/components/chat/Messages/CompareMessages.svelte

@@ -71,8 +71,8 @@
 					class=" snap-center min-w-80 w-full max-w-full m-1 outline outline-1 {history.messages[
 						currentMessageId
 					].model === model
-						? 'outline-gray-200 dark:outline-gray-700 outline-2'
-						: 'outline-gray-100 dark:outline-gray-850 '} transition p-5 rounded-3xl"
+						? 'outline-gray-100 dark:outline-gray-700 outline-2'
+						: 'outline-gray-50 dark:outline-gray-850 '} transition p-5 rounded-3xl"
 					on:click={() => {
 						currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
 

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -25,7 +25,7 @@
 
 	export let items = [{ value: 'mango', label: 'Mango' }];
 
-	export let className = ' w-[30rem]';
+	export let className = 'w-[30rem]';
 
 	let show = false;
 
@@ -203,7 +203,9 @@
 	</DropdownMenu.Trigger>
 
 	<DropdownMenu.Content
-		class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-xl  bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none "
+		class=" z-40 {$mobile
+			? `w-full`
+			: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl  bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none "
 		transition={flyAndScale}
 		side={$mobile ? 'bottom' : 'bottom-start'}
 		sideOffset={4}

src/lib/components/workspace/Playground.svelte

@@ -329,7 +329,6 @@
 											info: model
 										}))}
 									bind:value={selectedModelId}
-									className="w-[42rem]"
 								/>
 							</div>
 						</div>