refac

src/lib/components/chat/MessageInput.svelte

@@ -2013,13 +2013,13 @@
 								</div>
 
 								<div class="self-end flex space-x-1 mr-1 shrink-0 gap-[0.5px]">
-									<div class="-mr-[0.5px] flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
+									<div class="flex min-w-0 max-w-[10rem] items-center sm:max-w-[13rem]">
 										<ModelSelector
 											bind:selectedModels
 											showSetDefault={!history?.currentId}
 											placement="auto"
 											align="end"
-											triggerClassName="items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] font-normal text-gray-600 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
+											triggerClassName="items-center gap-1.5 rounded-lg pl-2 pr-1.5 py-1 text-[13px] font-normal text-gray-600 transition-colors duration-100 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 										/>
 									</div>
 

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

@@ -20,7 +20,6 @@
 		user,
 		MODEL_DOWNLOAD_POOL,
 		models,
-		mobile,
 		temporaryChatEnabled,
 		settings,
 		config
@@ -76,6 +75,7 @@
 	let triggerElement: HTMLElement | null = null;
 	let contentElement: HTMLElement | null = null;
 	let dropdownPosition = { top: 0, left: 0, width: 0 };
+	const fullWidthBreakpoint = 640;
 
 	const portal = (node: HTMLElement) => {
 		document.body.appendChild(node);
@@ -94,6 +94,7 @@
 		const contentHeight = contentRect?.height ?? 0;
 		const spaceBelow = window.innerHeight - rect.bottom - 8;
 		const spaceAbove = rect.top - 8;
+		const fullWidth = window.innerWidth < fullWidthBreakpoint;
 		const resolvedPlacement =
 			placement === 'auto'
 				? contentHeight && spaceBelow < contentHeight && spaceAbove > spaceBelow
@@ -105,8 +106,8 @@
 				resolvedPlacement === 'top' && contentHeight
 					? rect.top - contentHeight - 2
 					: rect.bottom + 2,
-			left: $mobile ? 8 : align === 'end' && contentWidth ? rect.right - contentWidth : rect.left,
-			width: $mobile ? window.innerWidth - 16 : 0
+			left: fullWidth ? 8 : align === 'end' && contentWidth ? rect.right - contentWidth : rect.left,
+			width: fullWidth ? window.innerWidth - 16 : 0
 		};
 	};
 
@@ -641,7 +642,7 @@
 			}}
 		>
 			<span class="min-w-0 flex-1 truncate">{triggerLabel}</span>
-			<ChevronDown className="ml-1.5 size-2.5 shrink-0 self-center" strokeWidth="2.5" />
+			<ChevronDown className="ml-1 size-2.5 shrink-0 self-center" strokeWidth="2.5" />
 		</div>
 	</button>
 
@@ -649,12 +650,12 @@
 		<div
 			use:portal
 			bind:this={contentElement}
-			style="position: fixed; z-index: 9999; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;{$mobile
+			style="position: fixed; z-index: 9999; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px;{dropdownPosition.width
 				? ` width: ${dropdownPosition.width}px;`
 				: ''}"
 		>
 			<div
-				class="z-40 {$mobile
+				class="z-40 {dropdownPosition.width
 					? `w-full`
 					: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl border border-gray-100 bg-white p-0.5 shadow-lg outline-hidden dark:border-gray-800 dark:bg-gray-850 dark:text-white"
 				transition:flyAndScale

src/lib/components/chat/Navbar.svelte

@@ -77,8 +77,12 @@
 	aria-label="New Chat"
 />
 
-<nav class="sticky top-0 z-30 w-full pt-0.5 pb-1 -mb-12 flex flex-col items-center drag-region">
-	<div class="flex items-center w-full pl-1.5 pr-1">
+<nav
+	class="sticky top-0 z-30 w-full {$mobile
+		? 'pt-1.5'
+		: 'pt-0.5'} pb-1 -mb-12 flex flex-col items-center drag-region"
+>
+	<div class="flex items-center w-full {$mobile ? 'px-2.5' : 'pl-1.5 pr-1'}">
 		<div
 			id="navbar-bg-gradient-to-b"
 			class="{chat?.id
@@ -89,16 +93,19 @@
 		<div class=" flex max-w-full w-full mx-auto bg-transparent">
 			<div class="flex items-center w-full max-w-full">
 				{#if $mobile && !$showSidebar}
-					<div class="-translate-x-0.5 mr-1 mt-1 self-start flex flex-none items-center">
+					<div class="mr-1 flex flex-none items-center self-center">
 						<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
 							<button
-								class="flex size-6 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
+								id="sidebar-toggle-button"
+								class="flex cursor-pointer rounded-lg text-gray-500 transition hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200"
 								on:click={() => {
 									showSidebar.set(!$showSidebar);
 								}}
 								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 							>
-								<Sidebar />
+								<div class="self-center p-1.5">
+									<Sidebar />
+								</div>
 							</button>
 						</Tooltip>
 					</div>