From ed3ea90576296b199744802b47c7cc6fb7bbee73 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Fri, 25 Sep 2026 13:26:39 +0800
Subject: [PATCH] fix(web): quiet settings labels to match the navigation

Keep card titles at 14px semibold. Setting names and the settings navigation use 12px at regular weight, without shrinking the rows.
---
 apps/web/src/components/SettingsPane.tsx                  | 8 ++++----
 apps/web/src/components/plugins/PluginSettingsSection.tsx | 2 +-
 apps/web/src/components/settings/AiModelCard.tsx          | 2 +-
 apps/web/src/components/settings/AiPromptsCard.tsx        | 2 +-
 apps/web/src/components/settings/AiProviderCard.tsx       | 2 +-
 apps/web/src/components/settings/ObjectStorageCard.tsx    | 4 ++--
 apps/web/src/components/settings/PasswordCard.tsx         | 6 +++---
 apps/web/src/components/settings/UserManagementCard.tsx   | 8 ++++----
 apps/web/src/components/settings/settings-ui.ts           | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/SettingsPane.tsx b/apps/web/src/components/SettingsPane.tsx
index 72dfc7ba..1f2955a1 100644
--- a/apps/web/src/components/SettingsPane.tsx
+++ b/apps/web/src/components/SettingsPane.tsx
@@ -304,7 +304,7 @@ export const SettingsPane = ({
                   type="button"
                   onClick={() => setActiveTab(item.key)}
                   className={cn(
-                    "flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-left w-full",
+                    "flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-normal leading-5 transition-all duration-150 text-left w-full",
                     isSelected
                       ? `${item.colorClass} ${item.bgColorClass}`
                       : "text-slate-600 hover:bg-slate-200/50 hover:text-slate-900"
@@ -352,7 +352,7 @@ export const SettingsPane = ({
                     <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50/80">
                       <LayoutTemplate className="h-4 w-4 text-emerald-600" />
                     </div>
-                    <span className="text-sm font-semibold text-slate-800">{t("nav.templates")}</span>
+                    <span className="text-xs font-normal leading-5 text-slate-800">{t("nav.templates")}</span>
                   </div>
                   <ChevronRight className="h-4 w-4 text-slate-400" />
                 </button>
@@ -365,7 +365,7 @@ export const SettingsPane = ({
                     <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50/80">
                       <Sparkles className="h-4 w-4 text-emerald-600" />
                     </div>
-                    <span className="text-sm font-semibold text-slate-800">{t("nav.prompts")}</span>
+                    <span className="text-xs font-normal leading-5 text-slate-800">{t("nav.prompts")}</span>
                   </div>
                   <ChevronRight className="h-4 w-4 text-slate-400" />
                 </button>
@@ -384,7 +384,7 @@ export const SettingsPane = ({
                         <div className={cn("flex h-8 w-8 items-center justify-center rounded-lg", item.bgColorClass)}>
                           <Icon className={cn("h-4 w-4", item.iconColorClass)} />
                         </div>
-                        <span className="text-sm font-semibold text-slate-800">{item.label}</span>
+                        <span className="text-xs font-normal leading-5 text-slate-800">{item.label}</span>
                         {item.badge ? (
                           <span className="rounded-full border border-emerald-200/80 bg-emerald-50 px-1.5 py-0.5 text-xs font-semibold text-emerald-700">
                             {item.badge}
diff --git a/apps/web/src/components/plugins/PluginSettingsSection.tsx b/apps/web/src/components/plugins/PluginSettingsSection.tsx
index 3f8204e5..3d919038 100644
--- a/apps/web/src/components/plugins/PluginSettingsSection.tsx
+++ b/apps/web/src/components/plugins/PluginSettingsSection.tsx
@@ -52,7 +52,7 @@ const PluginSettingListDialog = ({ field }: { field: PluginSettingField }) => {
         <ul className="min-h-0 divide-y divide-slate-100 overflow-y-auto pb-1">
           {list.items.map((item, index) => (
             <li key={`${item.title}:${item.description ?? ""}:${index}`} className="px-6 py-3">
-              <div className="text-sm font-medium text-slate-800">{item.title}</div>
+              <div className="text-xs font-normal leading-5 text-slate-800">{item.title}</div>
               {item.description ? <div className="mt-0.5 text-xs leading-5 text-slate-500">{item.description}</div> : null}
             </li>
           ))}
diff --git a/apps/web/src/components/settings/AiModelCard.tsx b/apps/web/src/components/settings/AiModelCard.tsx
index e8021756..3493f90f 100644
--- a/apps/web/src/components/settings/AiModelCard.tsx
+++ b/apps/web/src/components/settings/AiModelCard.tsx
@@ -297,7 +297,7 @@ export const AiModelCard = () => {
 };
 
 const Field = ({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) => (
-  <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+  <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
     {label}{children}{hint ? <span className="text-xs font-normal leading-4 text-slate-500">{hint}</span> : null}
   </label>
 );
diff --git a/apps/web/src/components/settings/AiPromptsCard.tsx b/apps/web/src/components/settings/AiPromptsCard.tsx
index f65cfd78..a74b0770 100644
--- a/apps/web/src/components/settings/AiPromptsCard.tsx
+++ b/apps/web/src/components/settings/AiPromptsCard.tsx
@@ -39,7 +39,7 @@ export const AiPromptsCard = ({ onOpenLibrary }: { onOpenLibrary: () => void })
           <CardContent className="grid gap-3 p-4 pt-0 sm:px-5 sm:pb-5">
             <div className="flex items-center justify-between gap-3 rounded-lg border border-slate-200/70 bg-slate-50/50 px-3.5 py-3">
               <div className="min-w-0">
-                <p className="text-sm font-medium text-slate-800">{t("aiPrompts.listTitle")}</p>
+                <p className="text-xs font-normal leading-5 text-slate-800">{t("aiPrompts.listTitle")}</p>
                 <p className="mt-0.5 text-xs text-slate-500">{t("aiPrompts.count", { count })}</p>
               </div>
               <Button type="button" variant="outline" size="sm" className="h-8 gap-1.5 bg-card text-xs" onClick={onOpenLibrary}>
diff --git a/apps/web/src/components/settings/AiProviderCard.tsx b/apps/web/src/components/settings/AiProviderCard.tsx
index 9a3380cc..dda6c971 100644
--- a/apps/web/src/components/settings/AiProviderCard.tsx
+++ b/apps/web/src/components/settings/AiProviderCard.tsx
@@ -408,7 +408,7 @@ const formatBaseUrl = (baseUrl: string) => {
 };
 
 const Field = ({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) => (
-  <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+  <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
     {label}{children}{hint ? <span className="text-xs font-normal leading-4 text-slate-500">{hint}</span> : null}
   </label>
 );
diff --git a/apps/web/src/components/settings/ObjectStorageCard.tsx b/apps/web/src/components/settings/ObjectStorageCard.tsx
index 4ef790bf..98ace787 100644
--- a/apps/web/src/components/settings/ObjectStorageCard.tsx
+++ b/apps/web/src/components/settings/ObjectStorageCard.tsx
@@ -133,7 +133,7 @@ export const ObjectStorageCard = ({ demoMode }: { demoMode: boolean }) => {
                   <Field label={t("objectStorage.accessKeyId")}><Input value={accessKeyId} onChange={(event) => setAccessKeyId(event.target.value)} required autoComplete="off" /></Field>
                   <Field label={t("objectStorage.secretAccessKey")} hint={hasSavedSecret ? t("objectStorage.secretSavedHint") : undefined}><Input type="password" value={secretAccessKey} onChange={(event) => setSecretAccessKey(event.target.value)} required={!hasSavedSecret} autoComplete="new-password" placeholder={hasSavedSecret ? "••••••••••••" : ""} /></Field>
                   <Field label={t("objectStorage.objectPrefix")} hint={t("objectStorage.objectPrefixHint")}><Input value={objectPrefix} onChange={(event) => setObjectPrefix(event.target.value)} placeholder="edgeever" /></Field>
-                  <label className="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-card px-3 py-2.5 text-sm font-medium text-slate-700">
+                  <label className="flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-card px-3 py-2.5 text-xs font-normal leading-5 text-slate-700">
                     <span><span className="block">{t("objectStorage.pathStyle")}</span><span className="mt-0.5 block text-xs font-normal text-slate-500">{t("objectStorage.pathStyleHint")}</span></span>
                     <Switch checked={forcePathStyle} onCheckedChange={setForcePathStyle} />
                   </label>
@@ -171,7 +171,7 @@ export const ObjectStorageCard = ({ demoMode }: { demoMode: boolean }) => {
 };
 
 const Field = ({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) => (
-  <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+  <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
     {label}
     {children}
     {hint ? <span className="text-xs font-normal leading-4 text-slate-500">{hint}</span> : null}
diff --git a/apps/web/src/components/settings/PasswordCard.tsx b/apps/web/src/components/settings/PasswordCard.tsx
index f49f4b59..4022d61b 100644
--- a/apps/web/src/components/settings/PasswordCard.tsx
+++ b/apps/web/src/components/settings/PasswordCard.tsx
@@ -80,7 +80,7 @@ export const PasswordCard = ({ authRequired, demoMode }: PasswordCardProps) => {
           </p>
         ) : (
           <form className="grid gap-3 lg:grid-cols-3 lg:gap-y-2.5" onSubmit={handleSubmit}>
-          <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+          <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
             {t("password.currentPassword")}
             <Input
               className="lg:h-9"
@@ -91,7 +91,7 @@ export const PasswordCard = ({ authRequired, demoMode }: PasswordCardProps) => {
               required
             />
           </label>
-          <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+          <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
             {t("password.newPassword")}
             <Input
               className="lg:h-9"
@@ -103,7 +103,7 @@ export const PasswordCard = ({ authRequired, demoMode }: PasswordCardProps) => {
               required
             />
           </label>
-          <label className="grid gap-1.5 text-sm font-medium text-slate-700">
+          <label className="grid gap-1.5 text-xs font-normal leading-5 text-slate-700">
             {t("password.confirmPassword")}
             <Input
               className="lg:h-9"
diff --git a/apps/web/src/components/settings/UserManagementCard.tsx b/apps/web/src/components/settings/UserManagementCard.tsx
index 1253827e..701cf470 100644
--- a/apps/web/src/components/settings/UserManagementCard.tsx
+++ b/apps/web/src/components/settings/UserManagementCard.tsx
@@ -136,7 +136,7 @@ export const UserManagementCard = ({ demoMode }: UserManagementCardProps) => {
             <DialogDescription className="leading-6">{t("users.createDescription")}</DialogDescription>
           </DialogHeader>
           <form className="grid gap-5 px-6 py-5" autoComplete="off" onSubmit={handleCreate}>
-            <label className="grid gap-2 text-sm font-medium text-slate-700" htmlFor="edgeever-new-account-username">
+            <label className="grid gap-2 text-xs font-normal leading-5 text-slate-700" htmlFor="edgeever-new-account-username">
               {t("users.username")}
               <Input
                 id="edgeever-new-account-username"
@@ -153,7 +153,7 @@ export const UserManagementCard = ({ demoMode }: UserManagementCardProps) => {
                 maxLength={80}
               />
             </label>
-            <label className="grid gap-2 text-sm font-medium text-slate-700" htmlFor="edgeever-new-account-display-name">
+            <label className="grid gap-2 text-xs font-normal leading-5 text-slate-700" htmlFor="edgeever-new-account-display-name">
               {t("users.displayName")}
               <Input
                 id="edgeever-new-account-display-name"
@@ -167,7 +167,7 @@ export const UserManagementCard = ({ demoMode }: UserManagementCardProps) => {
                 maxLength={80}
               />
             </label>
-            <label className="grid gap-2 text-sm font-medium text-slate-700" htmlFor="edgeever-new-account-password">
+            <label className="grid gap-2 text-xs font-normal leading-5 text-slate-700" htmlFor="edgeever-new-account-password">
               {t("users.password")}
               <Input
                 id="edgeever-new-account-password"
@@ -199,7 +199,7 @@ export const UserManagementCard = ({ demoMode }: UserManagementCardProps) => {
         <DialogContent className="max-w-md">
           <DialogHeader><DialogTitle>{t("users.resetTitle", { username: resetUser?.username })}</DialogTitle><DialogDescription>{t("users.resetDescription")}</DialogDescription></DialogHeader>
           <form className="grid gap-4" autoComplete="off" onSubmit={handleReset}>
-            <label className="grid gap-2 text-sm font-medium text-slate-700" htmlFor="edgeever-reset-account-password">
+            <label className="grid gap-2 text-xs font-normal leading-5 text-slate-700" htmlFor="edgeever-reset-account-password">
               {t("users.newPassword")}
               <Input id="edgeever-reset-account-password" name="edgeever-reset-account-password" type="password" autoComplete="new-password" value={resetPassword} onChange={(event) => setResetPassword(event.target.value)} placeholder={t("users.passwordPlaceholder")} minLength={8} required />
             </label>
diff --git a/apps/web/src/components/settings/settings-ui.ts b/apps/web/src/components/settings/settings-ui.ts
index 58256140..b96e504e 100644
--- a/apps/web/src/components/settings/settings-ui.ts
+++ b/apps/web/src/components/settings/settings-ui.ts
@@ -9,6 +9,6 @@ export const SETTINGS_CARD_ICON_CLASSNAME = "h-4 w-4 text-emerald-700 shrink-0";
 /**
  * Unified typography and layout constants for setting rows/items within cards.
  */
-export const SETTINGS_ITEM_TITLE_CLASSNAME = "text-sm font-medium text-slate-800";
+export const SETTINGS_ITEM_TITLE_CLASSNAME = "text-xs font-normal leading-5 text-slate-800";
 export const SETTINGS_ITEM_DESCRIPTION_CLASSNAME = "mt-0.5 text-xs leading-4 text-slate-500";
 export const SETTINGS_ITEM_ICON_CLASSNAME = "mt-0.5 h-4 w-4 shrink-0 text-slate-500";