From de0e90551ff205e0f6f39ea8799e3f5075141379 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 01:38:17 -0400
Subject: [PATCH] refac

---
 .../workspace/Models/BuiltinTools.svelte      | 19 ++--
 .../workspace/Models/Capabilities.svelte      | 19 ++--
 .../workspace/Models/DefaultFeatures.svelte   | 19 ++--
 .../workspace/Models/ModelEditor.svelte       | 86 ++++++++++---------
 4 files changed, 68 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/workspace/Models/BuiltinTools.svelte b/src/lib/components/workspace/Models/BuiltinTools.svelte
index cf921a933d..838445b468 100644
--- a/src/lib/components/workspace/Models/BuiltinTools.svelte
+++ b/src/lib/components/workspace/Models/BuiltinTools.svelte
@@ -67,12 +67,15 @@
 </script>
 
 <div>
-	<div class="flex w-full justify-between mb-1">
-		<div class="self-center text-xs font-normal text-gray-500">{$i18n.t('Builtin Tools')}</div>
-	</div>
-	<div class="flex items-center mt-2 flex-wrap">
+	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Builtin Tools')}</div>
+	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 xl:grid-cols-3">
 		{#each allTools as tool}
-			<div class="flex items-center gap-2 mr-3">
+			<div class="flex min-h-6 items-center justify-between gap-2.5">
+				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
+					<Tooltip content={marked.parse(toolLabels[tool].description)}>
+						<span class="truncate">{$i18n.t(toolLabels[tool].label)}</span>
+					</Tooltip>
+				</div>
 				<Checkbox
 					state={builtinTools[tool] !== false ? 'checked' : 'unchecked'}
 					on:change={(e) => {
@@ -84,12 +87,6 @@
 						builtinTools = builtinTools;
 					}}
 				/>
-
-				<div class="py-0.5 text-sm">
-					<Tooltip content={marked.parse(toolLabels[tool].description)}>
-						{$i18n.t(toolLabels[tool].label)}
-					</Tooltip>
-				</div>
 			</div>
 		{/each}
 	</div>
diff --git a/src/lib/components/workspace/Models/Capabilities.svelte b/src/lib/components/workspace/Models/Capabilities.svelte
index 6fe099c09c..6dab42c5b9 100644
--- a/src/lib/components/workspace/Models/Capabilities.svelte
+++ b/src/lib/components/workspace/Models/Capabilities.svelte
@@ -83,24 +83,21 @@
 </script>
 
 <div>
-	<div class="flex w-full justify-between mb-1">
-		<div class=" self-center text-xs font-normal text-gray-500">{$i18n.t('Capabilities')}</div>
-	</div>
-	<div class="flex items-center mt-2 flex-wrap">
+	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Capabilities')}</div>
+	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-2 xl:grid-cols-3">
 		{#each visibleCapabilities as capability}
-			<div class=" flex items-center gap-2 mr-3">
+			<div class="flex min-h-6 items-center justify-between gap-2.5">
+				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
+					<Tooltip content={marked.parse(capabilityLabels[capability].description)}>
+						<span class="truncate">{$i18n.t(capabilityLabels[capability].label)}</span>
+					</Tooltip>
+				</div>
 				<Checkbox
 					state={capabilities[capability] ? 'checked' : 'unchecked'}
 					on:change={(e) => {
 						capabilities[capability] = e.detail === 'checked';
 					}}
 				/>
-
-				<div class=" py-0.5 text-sm capitalize">
-					<Tooltip content={marked.parse(capabilityLabels[capability].description)}>
-						{$i18n.t(capabilityLabels[capability].label)}
-					</Tooltip>
-				</div>
 			</div>
 		{/each}
 	</div>
diff --git a/src/lib/components/workspace/Models/DefaultFeatures.svelte b/src/lib/components/workspace/Models/DefaultFeatures.svelte
index cfee967d24..ff23d01b4d 100644
--- a/src/lib/components/workspace/Models/DefaultFeatures.svelte
+++ b/src/lib/components/workspace/Models/DefaultFeatures.svelte
@@ -26,12 +26,15 @@
 </script>
 
 <div>
-	<div class="flex w-full justify-between mb-1">
-		<div class=" self-center text-xs font-normal text-gray-500">{$i18n.t('Default Features')}</div>
-	</div>
-	<div class="flex items-center mt-2 flex-wrap">
+	<div class="mb-1.5 text-xs text-gray-400 dark:text-gray-600">{$i18n.t('Default Features')}</div>
+	<div class="grid grid-cols-1 gap-x-5 gap-y-1 sm:grid-cols-3">
 		{#each availableFeatures as feature}
-			<div class=" flex items-center gap-2 mr-3">
+			<div class="flex min-h-6 items-center justify-between gap-2.5">
+				<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400">
+					<Tooltip content={marked.parse(featureLabels[feature].description)}>
+						<span class="truncate">{$i18n.t(featureLabels[feature].label)}</span>
+					</Tooltip>
+				</div>
 				<Checkbox
 					state={featureIds.includes(feature) ? 'checked' : 'unchecked'}
 					on:change={(e) => {
@@ -42,12 +45,6 @@
 						}
 					}}
 				/>
-
-				<div class=" py-0.5 text-sm capitalize">
-					<Tooltip content={marked.parse(featureLabels[feature].description)}>
-						{$i18n.t(featureLabels[feature].label)}
-					</Tooltip>
-				</div>
 			</div>
 		{/each}
 	</div>
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index e3dcaa289a..8b22ad5087 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -447,7 +447,7 @@
 		</button>
 	{/if}
 
-	<div class="w-full max-h-full flex justify-center">
+	<div class="w-full max-h-full flex">
 		<input
 			bind:this={filesInputElement}
 			bind:files={inputFiles}
@@ -527,17 +527,17 @@
 
 		{#if !edit || (edit && model)}
 			<form
-				class="flex flex-col md:flex-row w-full gap-3"
+				class="flex w-full flex-col gap-2.5 md:flex-row"
 				on:submit|preventDefault={() => {
 					submitHandler();
 				}}
 			>
 				<div class="w-full px-1">
-					<div class="flex flex-row gap-3 w-full">
-						<div class="self-start flex justify-center py-1 shrink-0">
+					<div class="flex w-full flex-row gap-2.5">
+						<div class="self-start flex shrink-0 justify-center py-0.5">
 							<div class="self-center group">
 								<button
-									class="relative flex size-14 md:size-16 shrink-0 items-center overflow-hidden rounded-xl {info
+									class="relative flex size-12 shrink-0 items-center overflow-hidden rounded-xl md:size-14 {info
 										.meta.profile_image_url !== `${WEBUI_BASE_URL}/static/favicon.png`
 										? 'bg-transparent'
 										: 'bg-gray-50 dark:bg-gray-850'} ring-1 ring-gray-200/70 transition hover:ring-gray-300 dark:ring-white/10 dark:hover:ring-white/20"
@@ -589,7 +589,7 @@
 									></div>
 								</button>
 
-								<div class="mt-1 flex w-full justify-center">
+								<div class="mt-0.5 flex w-full justify-center">
 									<button
 										class="rounded-lg px-1.5 py-0.5 text-[0.6875rem] text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300"
 										on:click={() => {
@@ -603,12 +603,12 @@
 							</div>
 						</div>
 
-						<div class="flex flex-col w-full flex-1">
-							<div class="flex justify-between items-start gap-3 py-1">
+						<div class="flex w-full flex-1 flex-col">
+							<div class="flex items-start justify-between gap-2.5 py-0.5">
 								<div class=" flex flex-col w-full">
 									<div class="flex-1 w-full">
 										<input
-											class="w-full bg-transparent text-lg font-medium text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-xl"
+											class="w-full bg-transparent text-base font-medium leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
 											placeholder={$i18n.t('Model Name')}
 											bind:value={name}
 											required
@@ -647,7 +647,7 @@
 
 							{#if preset}
 								<div class="mb-1">
-									<div class=" text-xs font-normal mb-1 text-gray-500">
+									<div class="mb-1 text-xs text-gray-400 dark:text-gray-600">
 										{$i18n.t('Base Model (From)')}
 									</div>
 
@@ -657,7 +657,7 @@
 											placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
 											searchPlaceholder={$i18n.t('Search a model')}
 											items={getBaseModelItems($models)}
-											triggerClassName="text-sm"
+											triggerClassName="text-xs"
 											selectionOnly
 											includeHidden={$user?.role === 'admin'}
 											bind:value={info.base_model_id}
@@ -668,12 +668,12 @@
 
 							<div class="mb-1">
 								<div class="mb-1 flex w-full justify-between items-center">
-									<div class=" self-center text-xs font-normal text-gray-500">
+									<div class="self-center text-xs text-gray-400 dark:text-gray-600">
 										{$i18n.t('Description')}
 									</div>
 
 									<button
-										class="p-1 text-xs flex rounded-sm transition"
+										class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
 										type="button"
 										aria-pressed={enableDescription ? 'true' : 'false'}
 										aria-label={enableDescription
@@ -693,7 +693,7 @@
 
 								{#if enableDescription}
 									<Textarea
-										className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
+										className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
 										placeholder={$i18n.t('Add a short description about what this model does')}
 										bind:value={info.meta.description}
 									/>
@@ -723,19 +723,21 @@
 						</div>
 					</div>
 
-					<div class="my-2">
+					<section class="mt-2.5">
 						<div class="flex w-full justify-between">
-							<div class=" self-center text-xs font-normal text-gray-500">
+							<div class="mb-2 self-center text-xs text-gray-400 dark:text-gray-600">
 								{$i18n.t('Model Params')}
 							</div>
 						</div>
 
-						<div class="mt-2">
-							<div class="my-1">
-								<div class=" text-xs font-normal mb-2">{$i18n.t('System Prompt')}</div>
+						<div class="space-y-2.5">
+							<div>
+								<div class="mb-1 text-xs text-gray-600 dark:text-gray-400">
+									{$i18n.t('System Prompt')}
+								</div>
 								<div>
 									<Textarea
-										className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
+										className="min-h-16 w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-300 dark:placeholder:text-gray-700"
 										placeholder={$i18n.t(
 											'Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.'
 										)}
@@ -745,13 +747,13 @@
 								</div>
 							</div>
 
-							<div class="flex w-full justify-between">
-								<div class=" self-center text-xs font-normal">
+							<div class="flex h-7 w-full justify-between">
+								<div class="self-center text-xs text-gray-600 dark:text-gray-400">
 									{$i18n.t('Advanced Params')}
 								</div>
 
 								<button
-									class="p-1 px-3 text-xs flex rounded-sm transition"
+									class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
 									type="button"
 									on:click={() => {
 										showAdvanced = !showAdvanced;
@@ -771,19 +773,19 @@
 								</div>
 							{/if}
 						</div>
-					</div>
+					</section>
 
 					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" />
 
-					<div class="my-2">
+					<section class="my-2.5">
 						<div class="flex w-full justify-between items-center">
 							<div class="flex w-full justify-between items-center">
-								<div class=" self-center text-xs font-normal text-gray-500">
+								<div class="self-center text-xs text-gray-400 dark:text-gray-600">
 									{$i18n.t('Prompts')}
 								</div>
 
 								<button
-									class="p-1 text-xs flex rounded-sm transition"
+									class="text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
 									type="button"
 									on:click={() => {
 										if ((info?.meta?.suggestion_prompts ?? null) === null) {
@@ -805,25 +807,25 @@
 						{#if info?.meta?.suggestion_prompts}
 							<PromptSuggestions bind:promptSuggestions={info.meta.suggestion_prompts} />
 						{/if}
-					</div>
+					</section>
 
-					<div class="my-4">
+					<div class="my-3">
 						<Knowledge bind:selectedItems={knowledge} />
 					</div>
 
-					<div class="my-4">
+					<div class="my-3">
 						<ToolsSelector bind:selectedToolIds={toolIds} tools={$tools ?? []} />
 					</div>
 
-					<div class="my-4">
+					<div class="my-3">
 						<SkillsSelector bind:selectedSkillIds={skillIds} skills={skillsList} />
 					</div>
 
 					{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0 || ($functions ?? []).filter((func) => func.type === 'action').length > 0}
-						<hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" />
+						<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
 
 						{#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0}
-							<div class="my-4">
+							<div class="my-3">
 								<FiltersSelector
 									bind:selectedFilterIds={filterIds}
 									filters={($functions ?? []).filter((func) => func.type === 'filter')}
@@ -838,7 +840,7 @@
 							)}
 
 							{#if toggleableFilters.length > 0}
-								<div class="my-4">
+								<div class="my-3">
 									<DefaultFiltersSelector
 										bind:selectedFilterIds={defaultFilterIds}
 										filters={toggleableFilters}
@@ -848,7 +850,7 @@
 						{/if}
 
 						{#if ($functions ?? []).filter((func) => func.type === 'action').length > 0}
-							<div class="my-4">
+							<div class="my-3">
 								<ActionsSelector
 									bind:selectedActionIds={actionIds}
 									actions={($functions ?? []).filter((func) => func.type === 'action')}
@@ -857,9 +859,9 @@
 						{/if}
 					{/if}
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" />
+					<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
 
-					<div class="my-4">
+					<div class="my-3">
 						<Capabilities bind:capabilities />
 					</div>
 
@@ -872,25 +874,25 @@
 							.map(([key, value]) => key)}
 
 						{#if availableFeatures.length > 0}
-							<div class="my-4">
+							<div class="my-3">
 								<DefaultFeatures {availableFeatures} bind:featureIds={defaultFeatureIds} />
 							</div>
 						{/if}
 					{/if}
 
 					{#if capabilities.builtin_tools}
-						<div class="my-4">
+						<div class="my-3">
 							<BuiltinTools bind:builtinTools />
 						</div>
 					{/if}
 
 					{#if capabilities.terminal}
-						<div class="my-4">
+						<div class="my-3">
 							<TerminalSelector bind:terminalId />
 						</div>
 					{/if}
 
-					<div class="my-4">
+					<div class="my-3">
 						<div class="flex w-full justify-between mb-1">
 							<div class="self-center text-xs font-normal text-gray-500">
 								{$i18n.t('TTS Voice')}
@@ -903,7 +905,7 @@
 						/>
 					</div>
 
-					<hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" />
+					<hr class="my-3 border-gray-100/30 dark:border-gray-850/30" />
 
 					<div class="my-2 flex justify-end">
 						<button