From 6a7068c3a47ae38aecb404cdb2b151edae37ab5e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 00:21:47 -0400
Subject: [PATCH] refac

---
 src/lib/components/chat/SettingsModal.svelte |  6 +++---
 src/lib/components/layout/SearchModal.svelte | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 44feab36b3..aac8834366 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -590,7 +590,7 @@
 
 <Modal size="2xl" bind:show>
 	<div class="text-gray-700 dark:text-gray-100 mx-1">
-		<div class=" flex justify-between dark:text-gray-300 px-4 md:px-4.5 pt-4.5 pb-0.5 md:pb-2.5">
+		<div class=" flex justify-between dark:text-gray-300 px-4 pt-4 pb-1 md:pb-2">
 			<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
 			<button
 				aria-label={$i18n.t('Close settings modal')}
@@ -607,10 +607,10 @@
 			<div
 				role="tablist"
 				id="settings-tabs-container"
-				class="tabs flex flex-row overflow-x-auto gap-2.5 mx-3 md:pr-4 md:gap-1 md:flex-col flex-1 md:flex-none md:w-50 md:min-h-[min(42rem,calc(100dvh-10rem))] md:max-h-[min(42rem,calc(100dvh-10rem))] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
+				class="tabs flex flex-row overflow-x-auto gap-2 mx-2.5 md:pr-3.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-47 md:min-h-[min(42rem,calc(100dvh-10rem))] md:max-h-[min(42rem,calc(100dvh-10rem))] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
 			>
 				<div
-					class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-1 mb-1.5"
+					class="hidden md:flex w-full rounded-xl px-2.5 gap-1.5 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-0.75 mb-1.25"
 					id="settings-search"
 				>
 					<div class="self-center rounded-l-xl bg-transparent">
diff --git a/src/lib/components/layout/SearchModal.svelte b/src/lib/components/layout/SearchModal.svelte
index 6f9e5a64fc..403567803d 100644
--- a/src/lib/components/layout/SearchModal.svelte
+++ b/src/lib/components/layout/SearchModal.svelte
@@ -554,8 +554,8 @@
 </DeleteConfirmDialog>
 
 <Modal size="xl" bind:show>
-	<div class="py-3 dark:text-gray-300 text-gray-700">
-		<div class="px-4 pb-1.5">
+	<div class="py-2.5 dark:text-gray-300 text-gray-700">
+		<div class="px-3.5 pb-1">
 			<SearchInput
 				bind:value={query}
 				on:input={searchHandler}
@@ -592,7 +592,7 @@
 
 		<!-- <hr class="border-gray-50 dark:border-gray-850/30 my-1" /> -->
 
-		<div class="flex px-4 pb-1">
+		<div class="flex px-3.5 pb-0.5">
 			<div
 				class="flex flex-col overflow-y-auto h-96 md:h-[40rem] max-h-full scrollbar-hidden w-full flex-1 pr-2"
 			>
@@ -602,7 +602,7 @@
 
 				{#each actions as action, idx (action.label)}
 					<button
-						class=" w-full flex items-center rounded-xl text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedIdx ===
+						class=" w-full flex items-center rounded-xl text-sm py-1.5 px-2.5 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedIdx ===
 						idx
 							? 'bg-gray-50 dark:bg-gray-850'
 							: ''}"
@@ -640,7 +640,7 @@
 							<div
 								class="w-full text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
 									? ''
-									: 'pt-5'} pb-2 px-2"
+									: 'pt-4'} pb-1.5 px-2"
 							>
 								{$i18n.t(chat.time_range)}
 								<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
@@ -666,7 +666,7 @@
 
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<div
-							class="w-full flex justify-between items-center rounded-xl text-sm py-2 pl-3 pr-32 hover:bg-gray-50 dark:hover:bg-gray-850 group/item relative {selectedIdx ===
+							class="w-full flex justify-between items-center rounded-xl text-sm py-1.5 pl-2.5 pr-32 hover:bg-gray-50 dark:hover:bg-gray-850 group/item relative {selectedIdx ===
 							idx + actions.length
 								? 'bg-gray-50 dark:bg-gray-850'
 								: ''}"