refac: styling

src/lib/components/chat/ChatControls.svelte

@@ -5,6 +5,7 @@
 	import { onMount } from 'svelte';
 	import { mobile, showCallOverlay } from '$lib/stores';
 	import CallOverlay from './MessageInput/CallOverlay.svelte';
+	import Drawer from '../common/Drawer.svelte';
 
 	export let show = false;
 
@@ -91,8 +92,8 @@
 			/>
 		</div>
 	</div>
-{:else}
-	<Modal bind:show>
+{:else if show}
+	<Drawer bind:show>
 		<div class="  px-6 py-4 h-full">
 			<Controls
 				on:close={() => {
@@ -103,5 +104,5 @@
 				bind:params
 			/>
 		</div>
-	</Modal>
+	</Drawer>
 {/if}

src/lib/components/chat/ModelSelector.svelte

@@ -56,7 +56,7 @@
 
 			{#if selectedModelIdx === 0}
 				<div
-					class="  self-center mr-2 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.75px]"
+					class="  self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
 				>
 					<Tooltip content={$i18n.t('Add Model')}>
 						<button
@@ -82,7 +82,7 @@
 				</div>
 			{:else}
 				<div
-					class="  self-center disabled:text-gray-600 disabled:hover:text-gray-600 mr-2 -translate-y-[0.75px]"
+					class="  self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
 				>
 					<Tooltip content={$i18n.t('Remove Model')}>
 						<button
@@ -99,7 +99,7 @@
 								viewBox="0 0 24 24"
 								stroke-width="2"
 								stroke="currentColor"
-								class="size-3.5"
+								class="size-3"
 							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
 							</svg>