refac: styling

src/lib/components/chat/ChatControls.svelte

@@ -230,7 +230,7 @@
 					<div
 						class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
 							? ' '
-							: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-800'}  rounded-lg z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
+							: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-850'}  rounded-xl z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
 					>
 						{#if $showCallOverlay}
 							<div class="w-full h-full flex justify-center">

src/lib/components/chat/Controls/Controls.svelte

@@ -30,7 +30,7 @@
 
 	<div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5">
 		{#if chatFiles.length > 0}
-			<Collapsible title={$i18n.t('Files')} open={true}>
+			<Collapsible title={$i18n.t('Files')} open={true} buttonClassName="w-full">
 				<div class="flex flex-col gap-1 mt-1.5" slot="content">
 					{#each chatFiles as file, fileIdx}
 						<FileItem
@@ -56,31 +56,31 @@
 				</div>
 			</Collapsible>
 
-			<hr class="my-2 border-gray-50 dark:border-gray-850" />
+			<hr class="my-2 border-gray-50 dark:border-gray-800" />
 		{/if}
 
-		<Collapsible title={$i18n.t('Valves')}>
-			<div class="text-sm mt-1.5" slot="content">
+		<Collapsible title={$i18n.t('Valves')} buttonClassName="w-full">
+			<div class="text-sm" slot="content">
 				<Valves />
 			</div>
 		</Collapsible>
 
-		<hr class="my-2 border-gray-50 dark:border-gray-850" />
+		<hr class="my-2 border-gray-50 dark:border-gray-800" />
 
-		<Collapsible title={$i18n.t('System Prompt')} open={true}>
-			<div class=" mt-1.5" slot="content">
+		<Collapsible title={$i18n.t('System Prompt')} open={true} buttonClassName="w-full">
+			<div class="" slot="content">
 				<textarea
 					bind:value={params.system}
-					class="w-full rounded-lg px-3.5 py-2.5 text-sm dark:text-gray-300 dark:bg-gray-850 border border-gray-50 dark:border-gray-850 outline-none resize-none"
+					class="w-full text-xs py-1.5 bg-transparent outline-none resize-none"
 					rows="4"
 					placeholder={$i18n.t('Enter system prompt')}
 				/>
 			</div>
 		</Collapsible>
 
-		<hr class="my-2 border-gray-50 dark:border-gray-850" />
+		<hr class="my-2 border-gray-50 dark:border-gray-800" />
 
-		<Collapsible title={$i18n.t('Advanced Params')} open={true}>
+		<Collapsible title={$i18n.t('Advanced Params')} open={true} buttonClassName="w-full">
 			<div class="text-sm mt-1.5" slot="content">
 				<div>
 					<AdvancedParams admin={$user?.role === 'admin'} bind:params />

src/lib/components/common/Collapsible.svelte

@@ -12,7 +12,8 @@
 
 	export let open = false;
 	export let className = '';
-	export let buttonClassName = 'w-fit';
+	export let buttonClassName =
+		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
 	export let title = null;
 
 	export let grow = false;
@@ -33,10 +34,8 @@
 				}
 			}}
 		>
-			<div
-				class=" w-fit font-medium flex items-center justify-between gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-			>
-				<div class=" ">
+			<div class=" w-full font-medium flex items-center justify-between gap-2">
+				<div class="">
 					{title}
 				</div>