From d0536000964ed9b0105ce34ccb179607ec942cd1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 22 Dec 2025 17:20:19 +0400
Subject: [PATCH] refac: styling

---
 .../workspace/Models/ModelEditor.svelte       | 332 +++++++++---------
 1 file changed, 167 insertions(+), 165 deletions(-)

diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 313be6938a..c302c213f8 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -414,190 +414,192 @@
 					submitHandler();
 				}}
 			>
-				<div class="self-center md:self-start flex justify-center my-2 shrink-0">
-					<div class="self-center">
-						<button
-							class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
-							`${WEBUI_BASE_URL}/static/favicon.png`
-								? 'bg-transparent'
-								: 'bg-white'} shadow-xl group relative"
-							type="button"
-							on:click={() => {
-								filesInputElement.click();
-							}}
-						>
-							{#if info.meta.profile_image_url}
-								<img
-									src={info.meta.profile_image_url}
-									alt="model profile"
-									class="rounded-xl sm:size-60 size-max object-cover shrink-0"
-								/>
-							{:else}
-								<img
-									src="{WEBUI_BASE_URL}/static/favicon.png"
-									alt="model profile"
-									class=" rounded-xl sm:size-60 size-max object-cover shrink-0"
-								/>
-							{/if}
+				<div class="w-full">
+					<div class="flex gap-4 w-full">
+						<div class="self-center md:self-start flex justify-center my-2 shrink-0">
+							<div class="self-center">
+								<button
+									class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
+									`${WEBUI_BASE_URL}/static/favicon.png`
+										? 'bg-transparent'
+										: 'bg-white'} shadow-xl group relative"
+									type="button"
+									on:click={() => {
+										filesInputElement.click();
+									}}
+								>
+									{#if info.meta.profile_image_url}
+										<img
+											src={info.meta.profile_image_url}
+											alt="model profile"
+											class="rounded-xl sm:size-60 size-max object-cover shrink-0"
+										/>
+									{:else}
+										<img
+											src="{WEBUI_BASE_URL}/static/favicon.png"
+											alt="model profile"
+											class=" rounded-xl sm:size-60 size-max object-cover shrink-0"
+										/>
+									{/if}
 
-							<div class="absolute bottom-0 right-0 z-10">
-								<div class="m-1.5">
-									<div
-										class="shadow-xl p-1 rounded-full border-2 border-white bg-gray-800 text-white group-hover:bg-gray-600 transition dark:border-black dark:bg-white dark:group-hover:bg-gray-200 dark:text-black"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 16 16"
-											fill="currentColor"
-											class="size-5"
-										>
-											<path
-												fill-rule="evenodd"
-												d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-												clip-rule="evenodd"
-											/>
-										</svg>
+									<div class="absolute bottom-0 right-0 z-10">
+										<div class="m-1.5">
+											<div
+												class="shadow-xl p-1 rounded-full border-2 border-white bg-gray-800 text-white group-hover:bg-gray-600 transition dark:border-black dark:bg-white dark:group-hover:bg-gray-200 dark:text-black"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="size-5"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm10.5 5.707a.5.5 0 0 0-.146-.353l-1-1a.5.5 0 0 0-.708 0L9.354 9.646a.5.5 0 0 1-.708 0L6.354 7.354a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0-.146.353V12a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V9.707ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+														clip-rule="evenodd"
+													/>
+												</svg>
+											</div>
+										</div>
 									</div>
+
+									<div
+										class="absolute top-0 bottom-0 left-0 right-0 bg-white dark:bg-black rounded-lg opacity-0 group-hover:opacity-20 transition"
+									></div>
+								</button>
+
+								<div class="flex w-full mt-1 justify-end">
+									<button
+										class="px-2 py-1 text-gray-500 rounded-lg text-xs"
+										on:click={() => {
+											info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
+										}}
+										type="button"
+									>
+										{$i18n.t('Reset Image')}</button
+									>
 								</div>
 							</div>
-
-							<div
-								class="absolute top-0 bottom-0 left-0 right-0 bg-white dark:bg-black rounded-lg opacity-0 group-hover:opacity-20 transition"
-							></div>
-						</button>
-
-						<div class="flex w-full mt-1 justify-end">
-							<button
-								class="px-2 py-1 text-gray-500 rounded-lg text-xs"
-								on:click={() => {
-									info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`;
-								}}
-								type="button"
-							>
-								{$i18n.t('Reset Image')}</button
-							>
 						</div>
-					</div>
-				</div>
 
-				<div class="w-full">
-					<div class="flex flex-col">
-						<div class="flex justify-between items-start my-2">
-							<div class=" flex flex-col w-full">
-								<div class="flex-1 w-full">
-									<input
-										class="text-4xl font-medium w-full bg-transparent outline-hidden"
-										placeholder={$i18n.t('Model Name')}
-										bind:value={name}
-										required
-									/>
-								</div>
-
-								<div class="flex-1 w-full">
-									<div>
+						<div class="flex flex-col w-full flex-1">
+							<div class="flex justify-between items-start my-2">
+								<div class=" flex flex-col w-full">
+									<div class="flex-1 w-full">
 										<input
-											class="text-xs w-full bg-transparent outline-hidden"
-											placeholder={$i18n.t('Model ID')}
-											bind:value={id}
-											disabled={edit}
+											class="text-4xl font-medium w-full bg-transparent outline-hidden"
+											placeholder={$i18n.t('Model Name')}
+											bind:value={name}
 											required
 										/>
 									</div>
-								</div>
-							</div>
 
-							<div class="shrink-0">
-								<button
-									class="bg-gray-50 shrink-0 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-									type="button"
-									on:click={() => {
-										showAccessControlModal = true;
-									}}
-								>
-									<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
-
-									<div class="text-sm font-medium shrink-0">
-										{$i18n.t('Access')}
+									<div class="flex-1 w-full">
+										<div>
+											<input
+												class="text-xs w-full bg-transparent outline-hidden"
+												placeholder={$i18n.t('Model ID')}
+												bind:value={id}
+												disabled={edit}
+												required
+											/>
+										</div>
 									</div>
-								</button>
-							</div>
-						</div>
-
-						{#if preset}
-							<div class="mb-1">
-								<div class=" text-xs font-medium mb-1 text-gray-500">
-									{$i18n.t('Base Model (From)')}
 								</div>
 
-								<div>
-									<select
-										class="dark:bg-gray-900 text-sm w-full bg-transparent outline-hidden"
-										placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
-										bind:value={info.base_model_id}
-										required
+								<div class="shrink-0">
+									<button
+										class="bg-gray-50 shrink-0 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
+										type="button"
+										on:click={() => {
+											showAccessControlModal = true;
+										}}
 									>
-										<option value={null} class=" text-gray-900"
-											>{$i18n.t('Select a base model')}</option
+										<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
+
+										<div class="text-sm font-medium shrink-0">
+											{$i18n.t('Access')}
+										</div>
+									</button>
+								</div>
+							</div>
+
+							{#if preset}
+								<div class="mb-1">
+									<div class=" text-xs font-medium mb-1 text-gray-500">
+										{$i18n.t('Base Model (From)')}
+									</div>
+
+									<div>
+										<select
+											class="dark:bg-gray-900 text-sm w-full bg-transparent outline-hidden"
+											placeholder={$i18n.t('Select a base model (e.g. llama3, gpt-4o)')}
+											bind:value={info.base_model_id}
+											required
 										>
-										{#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena' && !(m?.direct ?? false)) as model}
-											<option value={model.id} class=" text-gray-900">{model.name}</option>
-										{/each}
-									</select>
+											<option value={null} class=" text-gray-900"
+												>{$i18n.t('Select a base model')}</option
+											>
+											{#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena' && !(m?.direct ?? false)) as model}
+												<option value={model.id} class=" text-gray-900">{model.name}</option>
+											{/each}
+										</select>
+									</div>
 								</div>
-							</div>
-						{/if}
-
-						<div class="mb-1">
-							<div class="mb-1 flex w-full justify-between items-center">
-								<div class=" self-center text-xs font-medium text-gray-500">
-									{$i18n.t('Description')}
-								</div>
-
-								<button
-									class="p-1 text-xs flex rounded-sm transition"
-									type="button"
-									aria-pressed={enableDescription ? 'true' : 'false'}
-									aria-label={enableDescription
-										? $i18n.t('Custom description enabled')
-										: $i18n.t('Default description enabled')}
-									on:click={() => {
-										enableDescription = !enableDescription;
-									}}
-								>
-									{#if !enableDescription}
-										<span class="ml-2 self-center">{$i18n.t('Default')}</span>
-									{:else}
-										<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
-									{/if}
-								</button>
-							</div>
-
-							{#if enableDescription}
-								<Textarea
-									className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
-									placeholder={$i18n.t('Add a short description about what this model does')}
-									bind:value={info.meta.description}
-								/>
 							{/if}
-						</div>
 
-						<div class="w-full mb-1 max-w-full">
-							<div class="">
-								<Tags
-									tags={info?.meta?.tags ?? []}
-									on:delete={(e) => {
-										const tagName = e.detail;
-										info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
-									}}
-									on:add={(e) => {
-										const tagName = e.detail;
-										if (!(info?.meta?.tags ?? null)) {
-											info.meta.tags = [{ name: tagName }];
-										} else {
-											info.meta.tags = [...info.meta.tags, { name: tagName }];
-										}
-									}}
-								/>
+							<div class="mb-1">
+								<div class="mb-1 flex w-full justify-between items-center">
+									<div class=" self-center text-xs font-medium text-gray-500">
+										{$i18n.t('Description')}
+									</div>
+
+									<button
+										class="p-1 text-xs flex rounded-sm transition"
+										type="button"
+										aria-pressed={enableDescription ? 'true' : 'false'}
+										aria-label={enableDescription
+											? $i18n.t('Custom description enabled')
+											: $i18n.t('Default description enabled')}
+										on:click={() => {
+											enableDescription = !enableDescription;
+										}}
+									>
+										{#if !enableDescription}
+											<span class="ml-2 self-center">{$i18n.t('Default')}</span>
+										{:else}
+											<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
+										{/if}
+									</button>
+								</div>
+
+								{#if enableDescription}
+									<Textarea
+										className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
+										placeholder={$i18n.t('Add a short description about what this model does')}
+										bind:value={info.meta.description}
+									/>
+								{/if}
+							</div>
+
+							<div class="w-full mb-1 max-w-full">
+								<div class="">
+									<Tags
+										tags={info?.meta?.tags ?? []}
+										on:delete={(e) => {
+											const tagName = e.detail;
+											info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName);
+										}}
+										on:add={(e) => {
+											const tagName = e.detail;
+											if (!(info?.meta?.tags ?? null)) {
+												info.meta.tags = [{ name: tagName }];
+											} else {
+												info.meta.tags = [...info.meta.tags, { name: tagName }];
+											}
+										}}
+									/>
+								</div>
 							</div>
 						</div>
 					</div>