From 79702261b0d02befd4a3167ff45a450991214abe Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 10 Oct 2026 17:59:10 +0400
Subject: [PATCH] refac

---
 .../workspace/Models/BuiltinTools.svelte      |  2 +-
 .../workspace/Models/Capabilities.svelte      |  4 +--
 .../workspace/Models/Knowledge.svelte         |  2 +-
 .../workspace/Models/ModelEditor.svelte       | 31 +++++++++++--------
 .../workspace/Models/TypeaheadSelector.svelte |  2 +-
 src/routes/(app)/workspace/+layout.svelte     |  5 ++-
 6 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/workspace/Models/BuiltinTools.svelte b/src/lib/components/workspace/Models/BuiltinTools.svelte
index 83c0eb8a2a..c12ac1d91e 100644
--- a/src/lib/components/workspace/Models/BuiltinTools.svelte
+++ b/src/lib/components/workspace/Models/BuiltinTools.svelte
@@ -102,7 +102,7 @@
 	)}
 >
 	<span slot="summary" class="flex min-w-0 items-center gap-1 text-gray-900 dark:text-gray-100">
-		<span class="min-w-0 [overflow-wrap:anywhere]"
+		<span class="min-w-0 truncate"
 			>{enabledTools
 				.slice(0, 3)
 				.map((key) => toolLabels[key].label)
diff --git a/src/lib/components/workspace/Models/Capabilities.svelte b/src/lib/components/workspace/Models/Capabilities.svelte
index 922d3c991b..6d236d45a9 100644
--- a/src/lib/components/workspace/Models/Capabilities.svelte
+++ b/src/lib/components/workspace/Models/Capabilities.svelte
@@ -89,7 +89,7 @@
 		)}
 	>
 		<span slot="summary" class="flex min-w-0 items-center gap-1 text-gray-900 dark:text-gray-100">
-			<span class="min-w-0 [overflow-wrap:anywhere]"
+			<span class="min-w-0 truncate"
 				>{enabledCapabilityIds
 					.slice(0, 3)
 					.map((key) => capabilityLabels[key].label)
@@ -117,7 +117,7 @@
 			description={$i18n.t('Choose which available features start enabled in new chats.')}
 		>
 			<span slot="summary" class="flex min-w-0 items-center gap-1 text-gray-900 dark:text-gray-100">
-				<span class="min-w-0 [overflow-wrap:anywhere]"
+				<span class="min-w-0 truncate"
 					>{enabledDefaultIds
 						.slice(0, 3)
 						.map((key) => capabilityLabels[key].label)
diff --git a/src/lib/components/workspace/Models/Knowledge.svelte b/src/lib/components/workspace/Models/Knowledge.svelte
index 600afa7741..338fe5d82e 100644
--- a/src/lib/components/workspace/Models/Knowledge.svelte
+++ b/src/lib/components/workspace/Models/Knowledge.svelte
@@ -210,7 +210,7 @@
 				bind:this={valueElement}
 				class="flex min-w-0 items-center gap-1 text-gray-900 dark:text-gray-100"
 			>
-				<span class="min-w-0 [overflow-wrap:anywhere]"
+				<span class="min-w-0 truncate"
 					>{selectedItems
 						.slice(0, 3)
 						.map((item) => item.name || item.id)
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index d6e8d8031b..4f9988820c 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -794,7 +794,7 @@
 	/>
 
 	<div class="flex h-full min-h-0 w-full flex-col">
-		<div class="flex shrink-0 items-center gap-3">
+		<div class="flex shrink-0 items-center gap-3" class:px-3={!admin}>
 			{#if onBack}
 				<button
 					class="flex h-6 w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-md text-xs text-gray-400 transition-colors duration-75 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
@@ -848,7 +848,7 @@
 					/>
 				{/key}
 			</section>
-			<div class="flex shrink-0 justify-end px-1 py-2">
+			<div class="flex shrink-0 justify-end py-2" class:px-1={admin} class:px-3={!admin}>
 				<button
 					type="button"
 					class="flex h-7 items-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
@@ -861,7 +861,7 @@
 		{/if}
 		<div
 			class:hidden={historical}
-			class="min-h-0 w-full flex-1 overflow-y-auto pr-1 scrollbar-hover"
+			class="min-h-0 w-full flex-1 overflow-y-auto px-1 scrollbar-hover"
 		>
 			<input
 				bind:this={filesInputElement}
@@ -977,7 +977,7 @@
 
 								<div class="flex w-full min-w-0 items-center gap-3 py-0.5">
 									<div
-										class="relative flex min-w-0 flex-1 items-center gap-3.5 px-5 pb-1 {backgroundPreview ||
+										class="relative flex min-w-0 flex-1 items-center gap-3.5 px-3 md:px-5 pb-1 {backgroundPreview ||
 										info.meta.background_image_url
 											? '-mt-14 sm:-mt-16'
 											: '-mt-9'}"
@@ -1075,23 +1075,22 @@
 												{/if}
 												{#if !readOnly}
 													<div
-														class="[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/header:opacity-100 [@media(hover:hover)]:group-focus-within/header:opacity-100 flex shrink-0 items-center gap-1 text-xs"
+														class="[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/header:opacity-100 [@media(hover:hover)]:group-focus-within/header:opacity-100 absolute bottom-full right-3 mb-1 md:static md:mb-0 flex shrink-0 items-center gap-1 text-xs"
 													>
 														{#if loading}<Spinner />{/if}
 														{#if backgroundPreview || info.meta.background_image_url}
 															<button
 																type="button"
-																class="rounded-md px-2 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-gray-300"
+																class="rounded-md px-1 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-gray-300"
 																disabled={loading}
 																title={$i18n.t(
 																	'PNG, JPEG, WebP, or GIF. Up to 5 MiB and 25 megapixels.'
 																)}
-																on:click={() => backgroundInput.click()}
-																>{$i18n.t('Change background')}</button
+																on:click={() => backgroundInput.click()}>{$i18n.t('Change')}</button
 															>
 															<button
 																type="button"
-																class="rounded-md px-2 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-gray-300"
+																class="rounded-md px-1 py-1 text-xs font-normal text-gray-500 transition hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 dark:text-gray-400 dark:hover:text-gray-300"
 																disabled={loading}
 																on:click={() => {
 																	clearBackgroundPreview();
@@ -1145,7 +1144,7 @@
 									</div>
 								</div>
 							</div>
-							<div class="flex min-w-0 flex-col gap-3 px-5">
+							<div class="flex min-w-0 flex-col gap-3 px-3 md:px-5">
 								<div>
 									<div class="mb-1 flex w-full items-center justify-between">
 										{#if editingLocale}
@@ -1278,7 +1277,7 @@
 							</div>
 						</fieldset>
 
-						<div class="px-4">
+						<div class="px-2.5 md:px-4">
 							<section class="mt-4">
 								<div class="space-y-2 px-1">
 									<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
@@ -1598,7 +1597,9 @@
 							</fieldset>
 
 							<div class="my-2 text-xs text-gray-400 dark:text-gray-500">
-								<div class="flex w-full items-center gap-2 opacity-30 transition-opacity hover:opacity-60 focus-within:opacity-60">
+								<div
+									class="flex w-full items-center gap-2 opacity-30 transition-opacity hover:opacity-60 focus-within:opacity-60"
+								>
 									<button
 										type="button"
 										class="flex h-7 min-w-0 flex-1 items-center justify-between gap-3 rounded-sm text-start text-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
@@ -1642,7 +1643,11 @@
 			{/if}
 		</div>
 		{#if !readOnly && !historical && (!edit || model)}
-			<div class="flex shrink-0 items-center justify-end gap-2 px-1 py-2">
+			<div
+				class="flex shrink-0 items-center justify-end gap-2 py-2"
+				class:px-1={admin}
+				class:px-3={!admin}
+			>
 				{#if edit}
 					<input
 						form={formId}
diff --git a/src/lib/components/workspace/Models/TypeaheadSelector.svelte b/src/lib/components/workspace/Models/TypeaheadSelector.svelte
index bda4550108..59fbc01699 100644
--- a/src/lib/components/workspace/Models/TypeaheadSelector.svelte
+++ b/src/lib/components/workspace/Models/TypeaheadSelector.svelte
@@ -133,7 +133,7 @@
 					bind:this={valueElement}
 					class="flex min-w-0 items-center gap-1 text-gray-900 dark:text-gray-100"
 				>
-					<span class="min-w-0 [overflow-wrap:anywhere]">{summary || $i18n.t('None')}</span>
+					<span class="min-w-0 truncate">{summary || $i18n.t('None')}</span>
 					{#if selectedItems.length > 3}<span class="shrink-0 text-gray-500"
 							>+{selectedItems.length - 3}</span
 						>{/if}
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 91d154a148..52f728cab5 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -244,7 +244,10 @@
 		</nav>
 
 		<div
-			class="  pb-1 px-3 flex-1 min-w-0 max-h-full overflow-y-auto overflow-x-hidden"
+			class="pb-1 flex-1 min-w-0 max-h-full overflow-y-auto overflow-x-hidden"
+			class:px-3={!['/workspace/models/create', '/workspace/models/edit'].includes(
+				$page.url.pathname
+			)}
 			id="workspace-container"
 		>
 			<slot />