From 9ff74038b513e56f70c706de73d99a50a205eb64 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 19 May 2024 07:32:19 -0700
Subject: [PATCH] refac: styling

---
 src/lib/components/chat/Messages/CompareMessages.svelte | 4 ++--
 src/lib/components/chat/ModelSelector/Selector.svelte   | 6 ++++--
 src/lib/components/workspace/Playground.svelte          | 1 -
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/Messages/CompareMessages.svelte b/src/lib/components/chat/Messages/CompareMessages.svelte
index abb06e3a4..8d0fe7cef 100644
--- a/src/lib/components/chat/Messages/CompareMessages.svelte
+++ b/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;
 
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index cd128e651..d5fec57fb 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/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}
diff --git a/src/lib/components/workspace/Playground.svelte b/src/lib/components/workspace/Playground.svelte
index a69144e7d..755745999 100644
--- a/src/lib/components/workspace/Playground.svelte
+++ b/src/lib/components/workspace/Playground.svelte
@@ -329,7 +329,6 @@
 											info: model
 										}))}
 									bind:value={selectedModelId}
-									className="w-[42rem]"
 								/>
 							</div>
 						</div>