From bd5d7b2e879511882429075d804d9222956f4a1a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 24 Jul 2026 01:47:11 -0400
Subject: [PATCH] refac

---
 .../components/chat/Settings/Account.svelte   | 77 +++++++++----------
 .../Settings/Account/UpdatePassword.svelte    |  6 +-
 .../chat/Settings/UserSettingSection.svelte   |  3 +-
 3 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 1800aad8e4..1f44085cd1 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -304,51 +304,46 @@
 			</UserSettingField>
 		</UserSettingSection>
 
-		<UserSettingSection title={$i18n.t('User Variables')}>
-			<span slot="suffix" class="text-gray-400 dark:text-gray-600">{variableRows.length}</span>
-
-			<div>
-				<div class="flex items-center justify-between gap-2">
-					<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-						{$i18n.t('Use these in model system prompts as {{example}}.', {
-							example: '{{user.variables.key_name}}'
-						})}
-					</div>
-
-					<div class="flex shrink-0 items-center gap-2">
-						<button class={actionButtonClass} type="button" on:click={() => openVariableModal()}>
-							{$i18n.t('Add')}
+		<section class="mt-4 w-full">
+			<div
+				class="mb-0.5 flex items-center justify-between gap-2 text-xs text-gray-600 dark:text-gray-400"
+			>
+				<div class="flex min-w-0 items-center gap-1.5">
+					{$i18n.t('User Variables')}
+					<span class="text-gray-400 dark:text-gray-600">{variableRows.length}</span>
+				</div>
+				<button class={actionButtonClass} type="button" on:click={() => openVariableModal()}>
+					{$i18n.t('Add')}
+				</button>
+			</div>
+			<div class="flex flex-col">
+				{#each variableRows as row, idx}
+					<div class={variableRowClass(idx)}>
+						<div class="min-w-0 truncate font-mono text-xs text-gray-700 dark:text-gray-300">
+							{row.key || $i18n.t('key_name')}
+						</div>
+						<div class="min-w-0 flex-1 truncate text-xs text-gray-500 dark:text-gray-500">
+							{row.value || $i18n.t('Empty')}
+						</div>
+						<button class={actionButtonClass} type="button" on:click={() => openVariableModal(idx)}>
+							{$i18n.t('Edit')}
 						</button>
 					</div>
-				</div>
+				{/each}
 
-				<div class="flex flex-col">
-					{#each variableRows as row, idx}
-						<div class={variableRowClass(idx)}>
-							<div class="min-w-0 truncate font-mono text-xs text-gray-700 dark:text-gray-300">
-								{row.key || $i18n.t('key_name')}
-							</div>
-							<div class="min-w-0 flex-1 truncate text-xs text-gray-500 dark:text-gray-500">
-								{row.value || $i18n.t('Empty')}
-							</div>
-							<button
-								class={actionButtonClass}
-								type="button"
-								on:click={() => openVariableModal(idx)}
-							>
-								{$i18n.t('Edit')}
-							</button>
-						</div>
-					{/each}
-
-					{#if variableRows.length === 0}
-						<div class="text-xs text-gray-400 dark:text-gray-600">
-							{$i18n.t('No user variables configured.')}
-						</div>
-					{/if}
-				</div>
+				{#if variableRows.length === 0}
+					<div class="text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('No user variables configured.')}
+					</div>
+				{/if}
 			</div>
-		</UserSettingSection>
+
+			<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+				{$i18n.t('Use these in model system prompts as {{example}}.', {
+					example: '{{user.variables.key_name}}'
+				})}
+			</div>
+		</section>
 
 		{#if $config?.features.enable_login_form && $config?.features.enable_password_change_form}
 			<UserSettingSection title={$i18n.t('Password')}>
diff --git a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
index a9e045bad7..4c112f4c66 100644
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@@ -113,10 +113,8 @@
 			</div>
 		</div>
 
-		<div class="mt-3 flex justify-end">
-			<button
-				class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
-			>
+		<div class="flex justify-end">
+			<button class={actionButtonClass}>
 				{$i18n.t('Update password')}
 			</button>
 		</div>
diff --git a/src/lib/components/chat/Settings/UserSettingSection.svelte b/src/lib/components/chat/Settings/UserSettingSection.svelte
index ab5593802d..c6358f9055 100644
--- a/src/lib/components/chat/Settings/UserSettingSection.svelte
+++ b/src/lib/components/chat/Settings/UserSettingSection.svelte
@@ -6,9 +6,8 @@
 
 <section class="w-full {first ? '' : 'mt-4'} {className}">
 	{#if title}
-		<h3 class="mb-2 flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+		<h3 class="mb-2 text-xs text-gray-600 dark:text-gray-400">
 			{title}
-			<slot name="suffix" />
 		</h3>
 	{/if}