From 61a8f732910043ee0fd1c0690f22230ccea7a30d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 2 May 2024 17:14:33 -0700
Subject: [PATCH] fix: selector styling

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 6 +++---
 src/routes/(app)/playground/+page.svelte              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 37937503..39fc1c93 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 = 'max-w-lg';
+	export let className = ' w-[32rem]';
 
 	let show = false;
 
@@ -202,7 +202,7 @@
 		</div>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content
-		class=" z-40 w-full {className} justify-start rounded-lg  bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none "
+		class=" z-40 w-full {className} max-w-[calc(100vw-1rem)] justify-start rounded-lg  bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none "
 		transition={flyAndScale}
 		side={'bottom-start'}
 		sideOffset={4}
@@ -228,7 +228,7 @@
 				{#each filteredItems as item}
 					<button
 						aria-label="model-item"
-						class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
+						class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
 						on:click={() => {
 							value = item.value;
 
diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
index b0de1d27..f8f48c1d 100644
--- a/src/routes/(app)/playground/+page.svelte
+++ b/src/routes/(app)/playground/+page.svelte
@@ -330,7 +330,7 @@
 												info: model
 											}))}
 										bind:value={selectedModelId}
-										className="max-w-2xl"
+										className="w-[42rem]"
 									/>
 								</div>
 							</div>