From 12771aca8719ed4b23b0362b23d8d81f228190ca Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Thu, 29 Oct 2026 20:45:32 +0800
Subject: [PATCH] fix(ui): align help icons, account notes, and settings
 navigation

Use transparent help triggers and keep note text styling stable.
Show notes in account dialogs and simplify upstream labels.
Keep settings navigation segmented on narrow screens.

Co-authored-by: Codex <noreply@openai.com>
---
 docs/theme.md                                         |  1 +
 frontend/src/components/schema-form/index.vue         |  2 +-
 frontend/src/components/usage/UsageDetailPopover.vue  |  6 +++---
 frontend/src/i18n/locales/en/accounts.json            |  4 +---
 frontend/src/i18n/locales/zh-Hans/accounts.json       |  4 +---
 frontend/src/i18n/locales/zh-Hant/accounts.json       |  4 +---
 .../layout/components/system-update-modal/index.vue   |  2 +-
 .../views/accounts/components/AccountApiKeyFields.vue | 10 +++-------
 .../components/AccountConnectionTestModal.vue         |  2 +-
 .../views/accounts/components/AccountEditModal.vue    |  8 ++------
 .../accounts/components/AccountModelAccessField.vue   |  2 +-
 .../views/accounts/components/AccountNotesPopover.vue |  3 +--
 .../components/account-import-tasks/index.vue         |  2 ++
 .../components/account-quota-forecast-modal/index.vue |  2 ++
 .../account-quota-panel/ResetCreditAutomation.vue     |  2 +-
 .../views/plugins/components/PluginHelpPopover.vue    |  1 +
 .../proxies/components/ProxyBatchCreateFields.vue     |  2 +-
 .../views/settings/components/AccountAffinityCard.vue |  2 +-
 .../views/settings/components/AccountWarmupCard.vue   |  2 +-
 .../settings/components/ConcurrencyPolicyCard.vue     |  4 ++--
 .../settings/components/SmartSchedulingModal.vue      |  2 +-
 .../settings/components/backup/BackupRecordsCard.vue  |  2 +-
 .../components/ClientVersionPolicyCard.vue            |  3 ++-
 .../error-protection/AccountErrorProtectionCard.vue   |  2 ++
 .../settings/components/privacy/PrivacyPolicyCard.vue |  2 +-
 .../views/settings/components/privacy/StepFields.vue  |  4 ++--
 .../views/settings/components/privacy/StepList.vue    |  2 +-
 frontend/src/views/settings/index.vue                 | 11 ++---------
 frontend/src/views/settings/pricing/PricingEditor.vue |  2 +-
 .../src/views/settings/pricing/PricingToolbar.vue     |  2 +-
 frontend/src/views/settings/pricing/PricingUnit.vue   |  2 +-
 31 files changed, 43 insertions(+), 56 deletions(-)

diff --git a/docs/theme.md b/docs/theme.md
index 294ed5d92..0eb785deb 100644
--- a/docs/theme.md
+++ b/docs/theme.md
@@ -418,6 +418,7 @@ utility / arbitrary variant；Vue Transition、跨浏览器 Range、动态富文
 - 表格斑马纹使用 `table-row-stripe-bg`；选中行悬停使用 `table-row-selected-hover-bg`，不被普通 Hover 覆盖
 - 结构化浮层头部使用 `popover-header-bg`，明暗模式分别检查它与表格背景的区分
 - Card 和选项默认不增加装饰性边框；键盘焦点必须保留可见反馈
+- 帮助与说明图标常态、Hover 和 Active 均保持透明背景，按钮使用 `variant="link"`，保留键盘焦点反馈；已有说明浮层时不重复显示原生 `title` 提示
 - 阴影保持中性，`shadowStrength` 只调节层级强弱，不给阴影染品牌色
 
 ## 扩展指南
diff --git a/frontend/src/components/schema-form/index.vue b/frontend/src/components/schema-form/index.vue
index 299ee7cb0..dc3785d20 100644
--- a/frontend/src/components/schema-form/index.vue
+++ b/frontend/src/components/schema-form/index.vue
@@ -146,7 +146,7 @@ defineExpose({ focusField })
         <template v-if="field.description" #label-extra>
           <ZPopover trigger="hover-click" placement="top-start">
             <template #reference>
-              <ZIconButton :aria-label="t('common.form.fieldHelp', { label: field.label })" class="size-3.5!" :title="undefined">
+              <ZIconButton variant="link" :aria-label="t('common.form.fieldHelp', { label: field.label })" class="size-3.5!" :title="undefined">
                 <Info class="size-3.5" />
               </ZIconButton>
             </template>
diff --git a/frontend/src/components/usage/UsageDetailPopover.vue b/frontend/src/components/usage/UsageDetailPopover.vue
index e0f51c90f..ffd10753b 100644
--- a/frontend/src/components/usage/UsageDetailPopover.vue
+++ b/frontend/src/components/usage/UsageDetailPopover.vue
@@ -19,10 +19,10 @@ defineProps<{
     <template #reference>
       <button
         type="button"
-        class="inline-flex size-4 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
+        class="inline-flex size-4 items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
         :class="tone === 'warning'
-          ? 'bg-cp-warning-container text-cp-warning-on-container hover:bg-cp-warning-container-hover'
-          : 'bg-cp-primary-container text-cp-primary-on-container hover:bg-cp-primary-container-hover'"
+          ? 'text-cp-warning-text'
+          : 'text-cp-primary-text'"
         :aria-label="triggerLabel"
       >
         <Info class="size-3" />
diff --git a/frontend/src/i18n/locales/en/accounts.json b/frontend/src/i18n/locales/en/accounts.json
index 4b82334a2..8625b35ec 100644
--- a/frontend/src/i18n/locales/en/accounts.json
+++ b/frontend/src/i18n/locales/en/accounts.json
@@ -118,7 +118,6 @@
       "noModelsAvailable": "No models available for testing"
     },
     "credentials": {
-      "wsFirst": "WS first",
       "accountName": "Account name",
       "enterUpstreamName": "Enter the upstream name",
       "baseUrlHelp": "Enter the API base URL, endpoint paths are appended automatically",
@@ -126,7 +125,7 @@
       "apiKeyPlaceholder": "Leave blank to keep the current key",
       "enterUpstreamKey": "Enter the upstream key",
       "transportLabel": "Transport",
-      "webSocketHelp": "WS first requires upstream support for Responses WebSocket",
+      "webSocketHelp": "WS requires upstream support for Responses WebSocket",
       "nameRequired": "Enter an account name",
       "validation": {
         "urlLength": "Upstream API URL must not exceed 2,048 characters",
@@ -163,7 +162,6 @@
     "editor": {
       "title": "Edit account",
       "transportLabel": "Upstream transport",
-      "upstreamConnection": "Upstream connection",
       "loadError": "Could not load upstream settings",
       "notesHelp": "Up to 500 characters, leave blank to clear notes",
       "oauthUnavailable": "This account has no OAuth upstream settings",
diff --git a/frontend/src/i18n/locales/zh-Hans/accounts.json b/frontend/src/i18n/locales/zh-Hans/accounts.json
index 3da83675e..4f8592aa8 100644
--- a/frontend/src/i18n/locales/zh-Hans/accounts.json
+++ b/frontend/src/i18n/locales/zh-Hans/accounts.json
@@ -118,7 +118,6 @@
       "noModelsAvailable": "没有可测试模型"
     },
     "credentials": {
-      "wsFirst": "WS 优先",
       "accountName": "账号名称",
       "enterUpstreamName": "输入上游名称",
       "baseUrlHelp": "填写 API 前缀，接口路径会自动追加",
@@ -126,7 +125,7 @@
       "apiKeyPlaceholder": "留空保留当前密钥",
       "enterUpstreamKey": "输入上游密钥",
       "transportLabel": "传输方式",
-      "webSocketHelp": "WS 优先需要上游支持 Responses WebSocket",
+      "webSocketHelp": "WS 需要上游支持 Responses WebSocket",
       "nameRequired": "请输入账号名称",
       "validation": {
         "urlLength": "上游 API 地址不能超过 2048 个字符",
@@ -163,7 +162,6 @@
     "editor": {
       "title": "编辑账号",
       "transportLabel": "上游传输方式",
-      "upstreamConnection": "上游连接",
       "loadError": "上游设置读取失败",
       "notesHelp": "最多 500 字，留空可清除备注",
       "oauthUnavailable": "该账号没有 OAuth 上游设置",
diff --git a/frontend/src/i18n/locales/zh-Hant/accounts.json b/frontend/src/i18n/locales/zh-Hant/accounts.json
index eeff48d6f..0651b3568 100644
--- a/frontend/src/i18n/locales/zh-Hant/accounts.json
+++ b/frontend/src/i18n/locales/zh-Hant/accounts.json
@@ -118,7 +118,6 @@
       "noModelsAvailable": "沒有可測試模型"
     },
     "credentials": {
-      "wsFirst": "WS 優先",
       "accountName": "賬號名稱",
       "enterUpstreamName": "輸入上游名稱",
       "baseUrlHelp": "填寫 API 前綴，接口路徑會自動追加",
@@ -126,7 +125,7 @@
       "apiKeyPlaceholder": "留空保留當前密鑰",
       "enterUpstreamKey": "輸入上游密鑰",
       "transportLabel": "傳輸方式",
-      "webSocketHelp": "WS 優先需要上游支持 Responses WebSocket",
+      "webSocketHelp": "WS 需要上游支持 Responses WebSocket",
       "nameRequired": "請輸入賬號名稱",
       "validation": {
         "urlLength": "上游 API 地址不能超過 2048 個字符",
@@ -163,7 +162,6 @@
     "editor": {
       "title": "編輯賬號",
       "transportLabel": "上游傳輸方式",
-      "upstreamConnection": "上游連接",
       "loadError": "上游設置讀取失敗",
       "notesHelp": "最多 500 字，留空可清除備註",
       "oauthUnavailable": "該賬號沒有 OAuth 上游設置",
diff --git a/frontend/src/layout/components/system-update-modal/index.vue b/frontend/src/layout/components/system-update-modal/index.vue
index edaa79319..d1aea839f 100644
--- a/frontend/src/layout/components/system-update-modal/index.vue
+++ b/frontend/src/layout/components/system-update-modal/index.vue
@@ -481,7 +481,7 @@ watch(
         />
         <ZPopover placement="top-start">
           <template #reference>
-            <ZButton variant="text" size="small" square :aria-label="t('systemUpdate.channels.help')">
+            <ZButton variant="link" size="small" square :aria-label="t('systemUpdate.channels.help')">
               <CircleHelp class="size-4" />
             </ZButton>
           </template>
diff --git a/frontend/src/views/accounts/components/AccountApiKeyFields.vue b/frontend/src/views/accounts/components/AccountApiKeyFields.vue
index 869b68491..935f2f6fb 100644
--- a/frontend/src/views/accounts/components/AccountApiKeyFields.vue
+++ b/frontend/src/views/accounts/components/AccountApiKeyFields.vue
@@ -3,7 +3,6 @@ import type { ApiKeyAccountForm } from '../utils/upstreamApiKey'
 
 import { ZFormItem, ZInput, ZSegmented } from '@codex-proxy/ui'
 
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{ disabled?: boolean, editing?: boolean }>()
@@ -11,13 +10,10 @@ defineProps<{ disabled?: boolean, editing?: boolean }>()
 const { t } = useI18n({ useScope: 'global' })
 
 const form = defineModel<ApiKeyAccountForm>({ required: true })
-const transportOptions = computed(() => ([
+const transportOptions = [
   { label: 'HTTP / SSE', value: 'http' },
-  {
-    label: t('accounts.credentials.wsFirst'),
-    value: 'prefer_websocket',
-  },
-]))
+  { label: 'WS', value: 'prefer_websocket' },
+]
 </script>
 
 <template>
diff --git a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
index 9c8542663..8960048dd 100644
--- a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
+++ b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
@@ -58,7 +58,7 @@ function connectionLogClass(tone: string) {
       <section
         class="flex items-center justify-between gap-4 rounded-cp-card bg-cp-fill-quaternary px-4 py-3"
       >
-        <AccountIdentityCell :account="account" size="lg" show-plan />
+        <AccountIdentityCell :account="account" size="lg" show-plan show-notes />
         <AccountStatusBadge
           :status="account.status"
           :error-reason="account.errorReason"
diff --git a/frontend/src/views/accounts/components/AccountEditModal.vue b/frontend/src/views/accounts/components/AccountEditModal.vue
index 24112da95..3bb1f7741 100644
--- a/frontend/src/views/accounts/components/AccountEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountEditModal.vue
@@ -59,6 +59,7 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
           class="min-w-0 flex-1"
           :account="account"
           size="lg"
+          show-notes
         />
         <div class="flex shrink-0 items-center gap-3">
           <AccountPlanBadge :authentication-kind="account.authenticationKind" :plan-type="account.planType" :plan-type-display="account.planTypeDisplay" size="sm" />
@@ -73,12 +74,7 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
         <ZSegmented v-model="oauthTransport" :aria-label="t('accounts.editor.transportLabel')" :options="transportOptions" :disabled="saving || !configurationReady" />
       </ZFormItem>
 
-      <section v-if="isOpenAiApiKeyAccount(account)" class="grid gap-4">
-        <h3 class="m-0 text-cp font-heavy text-cp-text">
-          {{ t('accounts.editor.upstreamConnection') }}
-        </h3>
-        <AccountApiKeyFields v-model="apiKey" editing :disabled="saving || !configurationReady" />
-      </section>
+      <AccountApiKeyFields v-if="isOpenAiApiKeyAccount(account)" v-model="apiKey" editing :disabled="saving || !configurationReady" />
 
       <AccountSettingsFields
         v-model:enabled="enabled"
diff --git a/frontend/src/views/accounts/components/AccountModelAccessField.vue b/frontend/src/views/accounts/components/AccountModelAccessField.vue
index 3e0e771b4..54681561b 100644
--- a/frontend/src/views/accounts/components/AccountModelAccessField.vue
+++ b/frontend/src/views/accounts/components/AccountModelAccessField.vue
@@ -196,7 +196,7 @@ watch(search, () => {
             <ZPopover v-if="item.unavailable" class="mr-1 shrink-0" trigger="hover-click" placement="top" role="tooltip">
               <template #reference="{ open, id }">
                 <ZIconButton
-                  class="bg-transparent! hover:bg-transparent! active:bg-transparent!"
+                  variant="link"
                   size="small"
                   :aria-label="t('accounts.modelAccess.notInCurrentModelCatalog', { id: item.id })"
                   :aria-describedby="open ? id : undefined"
diff --git a/frontend/src/views/accounts/components/AccountNotesPopover.vue b/frontend/src/views/accounts/components/AccountNotesPopover.vue
index d6828b54c..81edbdb21 100644
--- a/frontend/src/views/accounts/components/AccountNotesPopover.vue
+++ b/frontend/src/views/accounts/components/AccountNotesPopover.vue
@@ -45,8 +45,7 @@ watch(() => props.notes, recheckOpen, { flush: 'post' })
     <template #reference>
       <button
         type="button"
-        class="inline-flex min-w-0 max-w-full touch-manipulation items-center rounded-cp-sm border-0 bg-transparent p-0 text-left text-cp-xs leading-4 text-cp-text-tertiary outline-none transition-colors hover:text-cp-primary-text focus-visible:ring-2 focus-visible:ring-cp-control-outline motion-reduce:transition-none"
-        :class="open ? 'text-cp-primary-text' : ''"
+        class="inline-flex min-w-0 max-w-full cursor-default touch-manipulation items-center rounded-cp-sm border-0 bg-transparent p-0 text-left text-cp-xs leading-4 text-cp-text-tertiary outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
         :aria-label="t('accounts.notes.viewAccountNotes')"
         aria-haspopup="dialog"
         :aria-expanded="open"
diff --git a/frontend/src/views/accounts/components/account-import-tasks/index.vue b/frontend/src/views/accounts/components/account-import-tasks/index.vue
index d540632f1..62fa09c1c 100644
--- a/frontend/src/views/accounts/components/account-import-tasks/index.vue
+++ b/frontend/src/views/accounts/components/account-import-tasks/index.vue
@@ -69,6 +69,8 @@ function handleRetentionKeydown(event: KeyboardEvent) {
         <ZPopover v-model="retentionOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
           <template #reference>
             <ZIconButton
+              variant="link"
+              :title="undefined"
               :aria-label="t('accounts.importTasks.taskRetentionInstructions')"
               size="small"
               :aria-expanded="retentionOpen"
diff --git a/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
index c6dd564e2..dd591762f 100644
--- a/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
@@ -116,6 +116,8 @@ function handleExplanationKeydown(event: KeyboardEvent) {
         <ZPopover v-model="explanationOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
           <template #reference>
             <ZIconButton
+              variant="link"
+              :title="undefined"
               :aria-label="t('accounts.quotaForecast.forecastDescription')"
               size="small"
               :aria-expanded="explanationOpen"
diff --git a/frontend/src/views/accounts/components/account-quota-panel/ResetCreditAutomation.vue b/frontend/src/views/accounts/components/account-quota-panel/ResetCreditAutomation.vue
index 78380565b..dcd938294 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/ResetCreditAutomation.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/ResetCreditAutomation.vue
@@ -73,7 +73,7 @@ watch(() => props.accountId, () => {
         </h3>
         <ZPopover trigger="click" placement="bottom-start" role="dialog">
           <template #reference="{ open, id }">
-            <ZIconButton size="small" class="size-6! p-0!" :aria-label="t('accounts.quotaReset.automaticUsageRules')" :aria-expanded="open" :aria-controls="id">
+            <ZIconButton variant="link" :title="undefined" size="small" class="size-6! p-0!" :aria-label="t('accounts.quotaReset.automaticUsageRules')" :aria-expanded="open" :aria-controls="id">
               <CircleHelp class="size-3.5" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/plugins/components/PluginHelpPopover.vue b/frontend/src/views/plugins/components/PluginHelpPopover.vue
index 4ad997d91..d5018d5fe 100644
--- a/frontend/src/views/plugins/components/PluginHelpPopover.vue
+++ b/frontend/src/views/plugins/components/PluginHelpPopover.vue
@@ -22,6 +22,7 @@ function handleKeydown(event: KeyboardEvent) {
   <ZPopover v-model="open" trigger="hover-click" placement="top-start" :hover-delay="240" class="shrink-0">
     <template #reference>
       <ZIconButton
+        variant="link"
         :aria-label="label"
         size="small"
         class="size-5!"
diff --git a/frontend/src/views/proxies/components/ProxyBatchCreateFields.vue b/frontend/src/views/proxies/components/ProxyBatchCreateFields.vue
index 1d367d009..7695bbbc3 100644
--- a/frontend/src/views/proxies/components/ProxyBatchCreateFields.vue
+++ b/frontend/src/views/proxies/components/ProxyBatchCreateFields.vue
@@ -23,7 +23,7 @@ const invalid = computed(() => props.rows.filter(row => row.error))
       <template #label-extra>
         <ZPopover class="-my-1" trigger="hover-click" placement="bottom-start">
           <template #reference="{ open }">
-            <ZIconButton :aria-label="t('proxies.batchCreate.formatDescription')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+            <ZIconButton variant="link" :aria-label="t('proxies.batchCreate.formatDescription')" :title="undefined" :aria-expanded="open" class="size-6!">
               <CircleHelp class="size-3.5" aria-hidden="true" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/settings/components/AccountAffinityCard.vue b/frontend/src/views/settings/components/AccountAffinityCard.vue
index 3cdc8edd7..1fd835d68 100644
--- a/frontend/src/views/settings/components/AccountAffinityCard.vue
+++ b/frontend/src/views/settings/components/AccountAffinityCard.vue
@@ -37,7 +37,7 @@ const affinityOptions = computed(() => ([
         <template #label-extra>
           <ZPopover class="-my-1" trigger="hover-click" placement="top-start">
             <template #reference="{ open }">
-              <ZIconButton :aria-label="t('settings.affinity.accountAffinityInstructions')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+              <ZIconButton variant="link" :aria-label="t('settings.affinity.accountAffinityInstructions')" :title="undefined" :aria-expanded="open" class="size-6!">
                 <CircleAlert class="size-3.5" aria-hidden="true" />
               </ZIconButton>
             </template>
diff --git a/frontend/src/views/settings/components/AccountWarmupCard.vue b/frontend/src/views/settings/components/AccountWarmupCard.vue
index 77e9748c3..c72880c82 100644
--- a/frontend/src/views/settings/components/AccountWarmupCard.vue
+++ b/frontend/src/views/settings/components/AccountWarmupCard.vue
@@ -20,7 +20,7 @@ const model = defineModel<string>('model', { required: true })
         {{ t('settings.warmup.title') }}
         <ZPopover trigger="hover-click" placement="top-start">
           <template #reference="{ open }">
-            <ZIconButton :aria-label="t('settings.warmup.helpTitle')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+            <ZIconButton variant="link" :aria-label="t('settings.warmup.helpTitle')" :title="undefined" :aria-expanded="open" class="size-6!">
               <CircleAlert class="size-3.5" aria-hidden="true" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue b/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
index 9e9d0d4dd..b56bf9c4b 100644
--- a/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
+++ b/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
@@ -41,7 +41,7 @@ const openaiGuardianReservedConcurrency = defineModel<string>('openaiGuardianRes
         <template #label-extra>
           <ZPopover class="-my-1" trigger="hover-click" placement="top-start">
             <template #reference="{ open }">
-              <ZIconButton :aria-label="t('settings.concurrency.queueTimeoutHelpTitle')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+              <ZIconButton variant="link" :aria-label="t('settings.concurrency.queueTimeoutHelpTitle')" :title="undefined" :aria-expanded="open" class="size-6!">
                 <CircleAlert class="size-3.5" aria-hidden="true" />
               </ZIconButton>
             </template>
@@ -56,7 +56,7 @@ const openaiGuardianReservedConcurrency = defineModel<string>('openaiGuardianRes
         <template #label-extra>
           <ZPopover class="-my-1" trigger="hover-click" placement="top-start">
             <template #reference="{ open }">
-              <ZIconButton :aria-label="t('settings.concurrency.autoReview.helpTitle')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+              <ZIconButton variant="link" :aria-label="t('settings.concurrency.autoReview.helpTitle')" :title="undefined" :aria-expanded="open" class="size-6!">
                 <CircleAlert class="size-3.5" aria-hidden="true" />
               </ZIconButton>
             </template>
diff --git a/frontend/src/views/settings/components/SmartSchedulingModal.vue b/frontend/src/views/settings/components/SmartSchedulingModal.vue
index 65904c3cd..db2ec046f 100644
--- a/frontend/src/views/settings/components/SmartSchedulingModal.vue
+++ b/frontend/src/views/settings/components/SmartSchedulingModal.vue
@@ -112,7 +112,7 @@ function confirm() {
                 {{ field.label }}
                 <ZPopover trigger="hover-click" placement="top-start">
                   <template #reference="{ open: helpOpen }">
-                    <ZIconButton :aria-label="t('settings.scheduling.about', { label: field.label })" :title="undefined" :aria-expanded="helpOpen" class="size-6! hover:bg-transparent! active:bg-transparent!">
+                    <ZIconButton variant="link" :aria-label="t('settings.scheduling.about', { label: field.label })" :title="undefined" :aria-expanded="helpOpen" class="size-6!">
                       <CircleHelp class="size-3.5" />
                     </ZIconButton>
                   </template>
diff --git a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
index 59bbf316f..1d0ec07d9 100644
--- a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
@@ -138,7 +138,7 @@ function canDelete(record: BackupRecord): boolean {
         <span>{{ t('settings.backup.backupRecords') }}</span>
         <ZPopover trigger="hover-click" placement="bottom-start">
           <template #reference="{ open }">
-            <ZIconButton :aria-label="t('settings.backup.backupScopeDescription')" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+            <ZIconButton variant="link" :aria-label="t('settings.backup.backupScopeDescription')" :title="undefined" :aria-expanded="open" class="size-6!">
               <CircleHelp class="size-3.5" aria-hidden="true" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue b/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
index 80fc8a7f1..b90503b7b 100644
--- a/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
+++ b/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
@@ -36,9 +36,10 @@ const minCodexCliVersion = defineModel<string>('minCodexCliVersion', { required:
       <span class="inline-flex items-center gap-1.5">
         <span>{{ t('settings.clientVersion.clientVersionRestrictions') }}</span>
         <ZIconButton
+          variant="link"
           :aria-label="t('settings.clientVersion.openGuide')"
           :title="undefined"
-          class="size-6! hover:bg-transparent! active:bg-transparent!"
+          class="size-6!"
           @click="emit('help')"
         >
           <CircleHelp class="size-3.5" aria-hidden="true" />
diff --git a/frontend/src/views/settings/components/error-protection/AccountErrorProtectionCard.vue b/frontend/src/views/settings/components/error-protection/AccountErrorProtectionCard.vue
index b828b8d79..421ad7491 100644
--- a/frontend/src/views/settings/components/error-protection/AccountErrorProtectionCard.vue
+++ b/frontend/src/views/settings/components/error-protection/AccountErrorProtectionCard.vue
@@ -101,6 +101,8 @@ function removeRule(id: string) {
             <ZPopover trigger="hover-click" placement="top-start" :hover-delay="240">
               <template #reference="{ open }">
                 <ZIconButton
+                  variant="link"
+                  :title="undefined"
                   size="small"
                   :aria-label="t('settings.errorProtection.matchingHelpTitle')"
                   :aria-expanded="open"
diff --git a/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue b/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
index 8e3257751..69db40920 100644
--- a/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
+++ b/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
@@ -113,7 +113,7 @@ function remove(rule: PrivacyRule) {
             <ZSelect v-model="model.onError" size="small" class="w-34" :options="failureOptions" :aria-label="t('settings.privacy.ruleExecutionFailed')" :disabled="disabled" />
             <ZPopover trigger="hover-click" placement="top-end">
               <template #reference="{ open: helpOpen }">
-                <ZIconButton size="small" :aria-label="t('settings.privacy.ruleExecutionInstructions')" :title="undefined" class="hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+                <ZIconButton variant="link" size="small" :aria-label="t('settings.privacy.ruleExecutionInstructions')" :title="undefined" :aria-expanded="helpOpen">
                   <CircleHelp class="size-3.5" />
                 </ZIconButton>
               </template>
diff --git a/frontend/src/views/settings/components/privacy/StepFields.vue b/frontend/src/views/settings/components/privacy/StepFields.vue
index b78e0ecfc..c2dfd1062 100644
--- a/frontend/src/views/settings/components/privacy/StepFields.vue
+++ b/frontend/src/views/settings/components/privacy/StepFields.vue
@@ -62,7 +62,7 @@ watch(() => step.value.action, (action) => {
       <template #label-extra>
         <ZPopover trigger="hover-click">
           <template #reference="{ open: helpOpen }">
-            <ZIconButton size="small" :aria-label="t('settings.privacy.steps.fieldPathSyntax')" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZIconButton variant="link" size="small" :aria-label="t('settings.privacy.steps.fieldPathSyntax')" :title="undefined" class="-my-2" :aria-expanded="helpOpen">
               <CircleHelp class="size-3.5" />
             </ZIconButton>
           </template>
@@ -84,7 +84,7 @@ watch(() => step.value.action, (action) => {
       <template #label-extra>
         <ZPopover trigger="hover-click">
           <template #reference="{ open: helpOpen }">
-            <ZIconButton size="small" :aria-label="t('settings.privacy.steps.regularSyntaxDescription')" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZIconButton variant="link" size="small" :aria-label="t('settings.privacy.steps.regularSyntaxDescription')" :title="undefined" class="-my-2" :aria-expanded="helpOpen">
               <CircleHelp class="size-3.5" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/settings/components/privacy/StepList.vue b/frontend/src/views/settings/components/privacy/StepList.vue
index 129bcd2fb..ed4d5e236 100644
--- a/frontend/src/views/settings/components/privacy/StepList.vue
+++ b/frontend/src/views/settings/components/privacy/StepList.vue
@@ -114,7 +114,7 @@ function moveWithKeyboard(index: number, offset: -1 | 1) {
         </h3>
         <ZPopover trigger="hover-click">
           <template #reference="{ open: helpOpen }">
-            <ZIconButton size="small" :aria-label="t('settings.privacy.steps.helpTitle')" :title="undefined" class="size-5! hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZIconButton variant="link" size="small" :aria-label="t('settings.privacy.steps.helpTitle')" :title="undefined" class="size-5!" :aria-expanded="helpOpen">
               <CircleHelp class="size-3.5" />
             </ZIconButton>
           </template>
diff --git a/frontend/src/views/settings/index.vue b/frontend/src/views/settings/index.vue
index 2223d273d..445dd7299 100644
--- a/frontend/src/views/settings/index.vue
+++ b/frontend/src/views/settings/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ZButton, ZConfirmDialog, ZIconButton, ZPageHeader, ZSegmented, ZSelect } from '@codex-proxy/ui'
+import { ZButton, ZConfirmDialog, ZIconButton, ZPageHeader, ZSegmented } from '@codex-proxy/ui'
 
 import { Save, Undo2 } from '@lucide/vue'
 
@@ -133,14 +133,7 @@ watch(section, (value) => {
       <ZSegmented
         :model-value="section"
         :aria-label="t('settings.page.sectionsLabel')"
-        class="hidden! bg-(--cp-input-bg)! sm:inline-grid!"
-        :options="sectionOptions"
-        @update:model-value="switchSection"
-      />
-      <ZSelect
-        :model-value="section"
-        :aria-label="t('settings.page.sectionsLabel')"
-        class="w-full sm:hidden"
+        class="w-full sm:w-auto"
         :options="sectionOptions"
         @update:model-value="switchSection"
       />
diff --git a/frontend/src/views/settings/pricing/PricingEditor.vue b/frontend/src/views/settings/pricing/PricingEditor.vue
index 3e025239c..e1a2915b6 100644
--- a/frontend/src/views/settings/pricing/PricingEditor.vue
+++ b/frontend/src/views/settings/pricing/PricingEditor.vue
@@ -162,7 +162,7 @@ function submit() {
     <template #footer>
       <ZPopover v-model="helpOpen" class="mr-auto self-center" placement="top-start" trigger="hover-click">
         <template #reference>
-          <ZButton variant="text" :aria-expanded="helpOpen" :aria-controls="helpOpen ? helpId : undefined">
+          <ZButton variant="link" :aria-expanded="helpOpen" :aria-controls="helpOpen ? helpId : undefined">
             <template #icon>
               <Info class="size-3.5" aria-hidden="true" />
             </template>
diff --git a/frontend/src/views/settings/pricing/PricingToolbar.vue b/frontend/src/views/settings/pricing/PricingToolbar.vue
index b24613a37..0b94e24cc 100644
--- a/frontend/src/views/settings/pricing/PricingToolbar.vue
+++ b/frontend/src/views/settings/pricing/PricingToolbar.vue
@@ -76,7 +76,7 @@ const providerOptions = computed(() => props.providers.map(value => ({
         <div class="flex items-center gap-1">
           <ZPopover v-model="syncInfoOpen" placement="bottom-end" trigger="hover-click">
             <template #reference>
-              <ZIconButton :aria-label="t('settings.pricing.synchronizationInstructions')" size="small" :aria-expanded="syncInfoOpen" :aria-controls="syncInfoOpen ? syncInfoId : undefined">
+              <ZIconButton variant="link" :title="undefined" :aria-label="t('settings.pricing.synchronizationInstructions')" size="small" :aria-expanded="syncInfoOpen" :aria-controls="syncInfoOpen ? syncInfoId : undefined">
                 <CircleAlert class="size-3.5" />
               </ZIconButton>
             </template>
diff --git a/frontend/src/views/settings/pricing/PricingUnit.vue b/frontend/src/views/settings/pricing/PricingUnit.vue
index df3eec793..bb1e1d2bb 100644
--- a/frontend/src/views/settings/pricing/PricingUnit.vue
+++ b/frontend/src/views/settings/pricing/PricingUnit.vue
@@ -15,10 +15,10 @@ const infoId = useId()
   <ZPopover v-model="infoOpen" placement="bottom-start" trigger="hover-click">
     <template #reference>
       <ZIconButton
+        variant="link"
         size="small"
         :aria-label="t('settings.pricing.unitHelp')"
         :title="undefined"
-        class="hover:bg-transparent! active:bg-transparent!"
         :aria-expanded="infoOpen"
         :aria-controls="infoOpen ? infoId : undefined"
       >