From f7e9bd98846d7ecc2c0b6fec65be60c2083da2f2 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Thu, 8 Oct 2026 15:46:27 +0800
Subject: [PATCH] fix(ui): prevent text overlap in Claude Code model selectors

- Let selector height adapt to model names and aliases
- Add layout regression tests across languages, themes, and viewport sizes
- Verify model selection, keyboard search, 1M toggles, and config updates
---
 .../claude-code/ClaudeCodeModelInputs.css     |  2 +-
 .../claude-code/ClaudeCodeModelInputs.tsx     |  1 -
 src/i18n/authFileList.ts                      | 12 ++++
 src/pages/AgentsPage.tsx                      | 36 ++++------
 src/pages/AuthFileManagementPage.css          | 47 ++++++++----
 src/pages/AuthFileManagementPage.tsx          | 13 ++--
 src/styles/feature-pages.css                  |  5 +-
 src/styles/ui-refinements.css                 | 19 +++--
 tests/auth-file-list-ui.cjs                   | 35 ++++++++-
 tests/claude-code-model-inputs-ui.cjs         |  2 +-
 tests/claude-code-model-layout-ui.cjs         | 71 +++++++++++++++++++
 tests/fixtures/agent-backups.tsx              |  7 ++
 tests/fixtures/auth-file-list.tsx             | 23 +++---
 13 files changed, 208 insertions(+), 65 deletions(-)
 create mode 100644 tests/claude-code-model-layout-ui.cjs

diff --git a/src/components/claude-code/ClaudeCodeModelInputs.css b/src/components/claude-code/ClaudeCodeModelInputs.css
index 664cfff..9181129 100644
--- a/src/components/claude-code/ClaudeCodeModelInputs.css
+++ b/src/components/claude-code/ClaudeCodeModelInputs.css
@@ -52,7 +52,7 @@
 .claude-code-model-inputs .agent-model-trigger,
 .claude-role-table .agent-model-trigger {
   min-height: 40px;
-  height: 40px;
+  height: auto;
   padding: 7px 11px;
   border: 1px solid var(--theme-d5d2cb);
   border-radius: 6px;
diff --git a/src/components/claude-code/ClaudeCodeModelInputs.tsx b/src/components/claude-code/ClaudeCodeModelInputs.tsx
index f977551..3f81782 100644
--- a/src/components/claude-code/ClaudeCodeModelInputs.tsx
+++ b/src/components/claude-code/ClaudeCodeModelInputs.tsx
@@ -50,7 +50,6 @@ export function ClaudeCodeModelInputs({ startupModel, subagentModel, models, rou
             <span className="switch-track" aria-hidden="true" /></span><span>1M</span>
           </label>
           </div>
-          {preview.role && <small className="claude-code-model-summary" aria-live="polite">{preview.role} → {preview.model}</small>}
           {!loading && !isKnownClaudeCodeModel(value, models) ? (
             <small role="status">{t('agents.claudeCodeRuntime.unverifiedModel')}</small>
           ) : null}
diff --git a/src/i18n/authFileList.ts b/src/i18n/authFileList.ts
index 82e6fbf..7e84051 100644
--- a/src/i18n/authFileList.ts
+++ b/src/i18n/authFileList.ts
@@ -24,6 +24,10 @@ export const authFileListZhCN = {
   'authFiles.usage.title': '累计用量',
   'authFiles.toolbar.refreshList': '刷新列表',
   'authFiles.toolbar.refreshQuota': '刷新额度',
+  'authFiles.action.refreshQuota': '刷新',
+  'authFiles.action.settings': '设置',
+  'authFiles.action.models': '模型',
+  'authFiles.action.copy': '复制',
 } as const;
 
 export const authFileListEn: Record<keyof typeof authFileListZhCN, string> = {
@@ -52,6 +56,10 @@ export const authFileListEn: Record<keyof typeof authFileListZhCN, string> = {
   'authFiles.usage.title': 'Cumulative usage',
   'authFiles.toolbar.refreshList': 'Refresh list',
   'authFiles.toolbar.refreshQuota': 'Refresh quota',
+  'authFiles.action.refreshQuota': 'Refresh',
+  'authFiles.action.settings': 'Settings',
+  'authFiles.action.models': 'Models',
+  'authFiles.action.copy': 'Copy',
 };
 
 export const authFileListJa: Record<keyof typeof authFileListZhCN, string> = {
@@ -80,4 +88,8 @@ export const authFileListJa: Record<keyof typeof authFileListZhCN, string> = {
   'authFiles.usage.title': '累計使用量',
   'authFiles.toolbar.refreshList': '一覧を更新',
   'authFiles.toolbar.refreshQuota': 'クォータを更新',
+  'authFiles.action.refreshQuota': '更新',
+  'authFiles.action.settings': '設定',
+  'authFiles.action.models': 'モデル',
+  'authFiles.action.copy': 'コピー',
 };
diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index 2b61b6c..eacd8c9 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -185,11 +185,11 @@ const CODEX_OAUTH_LOGIN_REQUIRED_ERROR = 'CODEX_OAUTH_LOGIN_REQUIRED';
 const DEFAULT_CLAUDE_CODE_MAX_CONTEXT_TOKENS = 200_000;
 const DEFAULT_CLAUDE_AUTO_COMPACT_PCT = 90;
 
-const createClaudeModelMappings = (model: string): ClaudeModelMappings => ({
-  opus: model,
-  sonnet: model,
-  haiku: model,
-  fable: model,
+const createClaudeModelMappings = (): ClaudeModelMappings => ({
+  opus: '',
+  sonnet: '',
+  haiku: '',
+  fable: '',
   fable1m: false,
   opus1m: false,
   sonnet1m: false,
@@ -207,8 +207,8 @@ const createClaudeModelMappingsByClient = (): Record<
   ClaudeModelMappingClientId,
   ClaudeModelMappings
 > => ({
-  'claude-code': createClaudeModelMappings(''),
-  'claude-desktop': { ...createClaudeModelMappings(''), desktopModels: createDefaultDesktopModels() },
+  'claude-code': createClaudeModelMappings(),
+  'claude-desktop': { ...createClaudeModelMappings(), desktopModels: createDefaultDesktopModels() },
 });
 
 const createClaudeBooleanByClient = (): Record<ClaudeModelMappingClientId, boolean> => ({
@@ -830,7 +830,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
   const isClaudeModelMappingClient = selected === 'claude-code' || selected === 'claude-desktop';
   const claudeModelMappingsDraft = isClaudeModelMappingClient
     ? claudeModelMappingsDraftByClient[selected]
-    : createClaudeModelMappings('');
+    : createClaudeModelMappings();
   const claudeCustomMapping = isClaudeModelMappingClient
     ? claudeCustomMappingByClient[selected]
     : false;
@@ -896,19 +896,19 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
         current,
         selected,
         appliedMappings,
-        createClaudeModelMappings(selected === 'claude-desktop' ? '' : selectedModel),
+        createClaudeModelMappings(),
         dirty,
       );
       const next: ClaudeModelMappings = {
         ...(selected === 'claude-desktop' ? { desktopModels: dirty && source.desktopModels
           ? source.desktopModels : appliedMappings ? desktopModelEntries(source) : createDefaultDesktopModels() } : {}),
-        opus: findAgentModel(models, source.opus)?.name ?? (selected === 'claude-code' ? source.opus || selectedModel : ''),
-        sonnet: findAgentModel(models, source.sonnet)?.name ?? (selected === 'claude-code' ? source.sonnet || selectedModel : ''),
-        haiku: findAgentModel(models, source.haiku)?.name ?? (selected === 'claude-code' ? source.haiku || selectedModel : ''),
+        opus: findAgentModel(models, source.opus)?.name ?? '',
+        sonnet: findAgentModel(models, source.sonnet)?.name ?? '',
+        haiku: findAgentModel(models, source.haiku)?.name ?? '',
         opus1m: Boolean(source.opus1m),
         sonnet1m: Boolean(source.sonnet1m),
         haiku1m: Boolean(source.haiku1m),
-        fable: source.fable || source.sonnet || selectedModel,
+        fable: findAgentModel(models, source.fable)?.name ?? '',
         fable1m: Boolean(source.fable1m),
         maxContextTokens: source.maxContextTokens ?? DEFAULT_CLAUDE_CODE_MAX_CONTEXT_TOKENS,
         autoCompactPct: source.autoCompactPct ?? DEFAULT_CLAUDE_AUTO_COMPACT_PCT,
@@ -928,7 +928,6 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
     isClaudeModelMappingClient,
     models,
     selected,
-    selectedModel,
   ]);
 
   const connectionState = activeStatus?.connectionState ?? 'invalid';
@@ -1075,12 +1074,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
     const model = findAgentModel(models, value);
     if (!model) return;
     if (isClaudeModelMappingClient) {
-      editClaudeModelMappings((current) => ({
-        ...current,
-        opus: model.name,
-        sonnet: model.name,
-        haiku: model.name,
-      }));
+      editClaudeModelMappings((current) => ({ ...current, sonnet: model.name }));
     }
     selectModel(model.name);
   };
@@ -1164,7 +1158,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
         return null;
       }
       const selectedEntries = selectedDesktopModelEntries(desktopEntries);
-      return { ...createClaudeModelMappings(''), sonnet: selectedEntries[0].model.trim(),
+      return { ...createClaudeModelMappings(), sonnet: selectedEntries[0].model.trim(),
         desktopModels: selectedEntries.map((entry) => ({ ...entry, model: entry.model.trim(), alias: entry.alias.trim() })) };
     }
     const resolved = {} as ClaudeModelMappings;
diff --git a/src/pages/AuthFileManagementPage.css b/src/pages/AuthFileManagementPage.css
index da931a1..1c1ebea 100644
--- a/src/pages/AuthFileManagementPage.css
+++ b/src/pages/AuthFileManagementPage.css
@@ -22,7 +22,7 @@
 .auth-files-heading-actions > .auth-toolbar-quiet { border-color: transparent; background: transparent; color: var(--auth-muted); }
 .auth-files-heading-actions > .auth-toolbar-quiet:hover:not(:disabled) { background: var(--bg-hover); color: var(--auth-text); }
 .auth-files-page .auth-files-panel {
-  --auth-list-columns: minmax(168px, 1.1fr) 72px 92px 116px 156px minmax(240px, 2.4fr) 248px;
+  --auth-list-columns: minmax(160px, 1fr) 72px 90px 112px 148px minmax(220px, 1.35fr) minmax(300px, 1.55fr);
   padding: 0;
   min-height: 0;
   border: 0;
@@ -64,6 +64,7 @@
 .auth-status-badge.warning { color: var(--amber-text); background: color-mix(in srgb, var(--amber-text) 8%, var(--bg-card)); }
 .auth-status-badge.error { color: var(--failure-badge-text); background: color-mix(in srgb, var(--failure-badge-text) 7%, var(--bg-card)); }
 .auth-status-badge.info { color: var(--auth-accent); background: color-mix(in srgb, var(--auth-accent) 8%, var(--bg-card)); }
+.auth-status-badge.neutral { color: var(--auth-muted); background: color-mix(in srgb, var(--auth-muted) 10%, var(--bg-card)); }
 .auth-list-muted { color: var(--auth-muted); font-size: 12px; }
 .auth-list-recent .auth-file-requests { gap: 9px; }
 .auth-list-recent .auth-file-requests-latest { color: var(--auth-muted); font-size: 12px; font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -80,14 +81,14 @@
 .auth-list-usage .auth-file-usage-metric.total svg { color: var(--auth-accent); background: color-mix(in srgb, var(--auth-accent) 9%, var(--bg-card)); }
 .auth-list-usage .auth-file-usage-metric strong { font-size: 13px; line-height: 1.2; font-weight: 750; }
 .auth-list-usage .auth-file-usage-scope { margin-top: 6px; color: var(--auth-muted); text-align: right; font-size: 10px; line-height: 1.2; }
-.auth-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
-.auth-list-icon-actions { display: flex; align-items: center; gap: 6px; }
-.auth-card-actions .auth-list-action { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; min-width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--auth-accent) 16%, var(--auth-border)); border-radius: 8px; color: var(--auth-accent); background: var(--bg-card); cursor: pointer; }
+.auth-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
+.auth-list-icon-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: max-content; }
+.auth-card-actions .auth-list-action { display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto; min-width: 0; min-height: 30px; padding: 4px 8px; gap: 4px; border: 1px solid color-mix(in srgb, var(--auth-accent) 16%, var(--auth-border)); border-radius: 8px; color: var(--auth-accent); background: var(--bg-card); font: inherit; font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; cursor: pointer; }
 .auth-card-actions .auth-list-action.muted { color: var(--auth-text); border-color: var(--auth-border); background: var(--bg-card); }
 .auth-card-actions .auth-list-action.danger { color: #e11d48; border-color: color-mix(in srgb, #e11d48 22%, var(--auth-border)); background: var(--bg-card); }
 .auth-card-actions .auth-list-action:disabled { opacity: .38; cursor: default; }
 .auth-card-actions .auth-list-action:not(:disabled):hover { background: color-mix(in srgb, currentColor 8%, var(--bg-card)); border-color: currentColor; }
-.auth-list-main-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-left: 10px; border-left: 1px solid var(--auth-border); }
+.auth-list-main-actions { display: flex; align-items: center; justify-content: flex-end; flex: none; gap: 8px; padding-left: 10px; border-left: 1px solid var(--auth-border); }
 .auth-list-switch { display: flex; align-items: center; flex: none; width: 40px; height: 24px; padding: 2px; border: 1px solid color-mix(in srgb, var(--auth-muted) 22%, var(--bg-card)); border-radius: 20px; background: color-mix(in srgb, var(--auth-muted) 28%, var(--bg-card)); cursor: pointer; }
 .auth-list-switch > span { display: block; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .15s; }
 .auth-list-switch[aria-checked="true"] { background: var(--auth-accent); border-color: var(--auth-accent); }
@@ -153,16 +154,16 @@
 @media (prefers-reduced-motion: reduce) { .credential-quota-track.indeterminate i { animation: none; width: 100%; opacity: .3; } }
 
 
-@container credential-files (min-width: 701px) and (max-width: 1360px) {
-  .auth-file-list-head, .auth-credential-row { grid-template-columns: minmax(132px, 1fr) 58px 74px 92px 128px minmax(168px, 1.6fr) 214px;; column-gap: 8px; }
-  .auth-file-card-grid, .auth-file-list-head { min-width: 980px; }
-  .auth-card-actions { gap: 8px; }
-  .auth-list-icon-actions { gap: 4px; }
-  .auth-card-actions .auth-list-action { width: 30px; min-width: 30px; height: 30px; }
+@container credential-files (min-width: 1501px) and (max-width: 1500px) {
+  .auth-file-list-head, .auth-credential-row { grid-template-columns: minmax(136px, 1fr) 62px 78px 96px 128px minmax(170px, 1.25fr) minmax(220px, 1.15fr); column-gap: 8px; }
+  .auth-file-card-grid, .auth-file-list-head { min-width: 1120px; }
+  .auth-card-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 6px; }
+  .auth-list-icon-actions { display: grid; grid-template-columns: repeat(3, max-content); justify-content: end; gap: 4px; }
+  .auth-card-actions .auth-list-action { min-height: 28px; padding: 3px 7px; font-size: 12px; }
   .auth-list-details-button { min-width: 48px; min-height: 30px; padding-inline: 8px; font-size: 12px; }
   .auth-list-usage .auth-file-usage-metric strong { font-size: 12px; }
 }
-@container credential-files (max-width: 700px) {
+@container credential-files (max-width: 1500px) {
   .auth-file-table-scroll { overflow: visible; }
   .auth-file-list-head { display: none; }
   .auth-file-card-grid { min-width: 0; margin-top: 10px; }
@@ -175,7 +176,7 @@
   .auth-list-quota { grid-column: 1 / -1; border-top: 1px solid var(--auth-border); padding-top: 12px; }
   .auth-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--auth-border); padding-top: 12px; }
   .auth-list-main-actions { display: flex; gap: 8px; padding-left: 8px; }
-  .auth-list-icon-actions { display: flex; gap: 4px; }
+  .auth-list-icon-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
   .auth-list-usage .auth-file-usage-metrics { gap: 5px; }
   .auth-list-usage .auth-file-usage-metric { gap: 3px; }
   .auth-list-usage .auth-file-usage-metric strong { font-size: 11px; }
@@ -231,10 +232,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.auth-files-page .credential-quota-dense .credential-quota-row:has(.credential-quota-row-detail) {
+  grid-column: 1 / -1;
+}
+.auth-files-page .credential-quota-dense .credential-quota-row-detail {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .auth-files-page .auth-file-card {
   border-color: #edf0f4;
   box-shadow: 0 1px 2px rgb(35 48 65 / 3%);
 }
+.auth-files-page .auth-card-actions {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.auth-files-page .auth-list-icon-actions,
+.auth-files-page .auth-list-main-actions {
+  max-width: 100%;
+}
+
 .auth-files-page .auth-file-card:hover {
   border-color: color-mix(in srgb, var(--auth-accent) 26%, #edf0f4);
   box-shadow: 0 4px 14px rgb(35 83 160 / 7%);
diff --git a/src/pages/AuthFileManagementPage.tsx b/src/pages/AuthFileManagementPage.tsx
index e4c00d5..aeddb07 100644
--- a/src/pages/AuthFileManagementPage.tsx
+++ b/src/pages/AuthFileManagementPage.tsx
@@ -15,16 +15,13 @@ import {
   Check,
   ChevronLeft,
   ChevronRight,
-  Copy,
   FileDown,
   FolderOpen,
   Import,
   LoaderCircle,
-  Network,
   RefreshCw,
   Search,
   Settings2,
-  Trash2,
   X,
 } from 'lucide-react';
 import antigravityIcon from '../assets/icons/antigravity.svg';
@@ -576,11 +573,11 @@ export function AuthFileManagementPage() {
                   </div>
                   <footer className="auth-card-actions auth-list-cell" data-label={t('authFiles.list.actions')}>
                     <div className="auth-list-icon-actions">
-                      <button type="button" className="auth-list-action" onClick={() => void refreshQuota(file)} disabled={busy || disabled || !quotaProvider || quota.status === 'loading'} title={t('authFiles.quota.refresh')} aria-label={t('authFiles.quota.refresh')}><RefreshCw size={15} className={quota.status === 'loading' ? 'spin' : ''} aria-hidden="true" /></button>
-                      <button type="button" className="auth-list-action" onClick={() => setSettingsName(name)} disabled={busy || resettingCooldown || !isOAuthCredentialFile(file)} title={t(isOAuthCredentialFile(file) ? 'authFiles.settings.title' : 'authFiles.fileOnly')} aria-label={t('authFiles.settings.title')}><Settings2 size={15} aria-hidden="true" /></button>
-                      <button type="button" className="auth-list-action" onClick={() => setModelViewName(name)} disabled={busy || !providerKey(file)} title={t('authFiles.models.viewTitle')} aria-label={t('authFiles.models.viewTitle')}><Network size={15} aria-hidden="true" /></button>
-                      <button type="button" className="auth-list-action muted" onClick={() => void copyName(name)} disabled={busy} title={t('authFiles.copyName')} aria-label={t('authFiles.copyName')}>{copied === name ? <Check size={15} aria-hidden="true" /> : <Copy size={15} aria-hidden="true" />}</button>
-                      <button type="button" className="auth-list-action danger" onClick={() => void deleteFile(file)} disabled={busy || resettingCooldown || isRuntimeOnly(file)} title={t('common.delete')} aria-label={t('common.delete')}><Trash2 size={15} aria-hidden="true" /></button>
+                      <button type="button" className="auth-list-action" onClick={() => void refreshQuota(file)} disabled={busy || disabled || !quotaProvider || quota.status === 'loading'} title={t('authFiles.quota.refresh')}><RefreshCw size={14} className={quota.status === 'loading' ? 'spin' : ''} aria-hidden="true" />{t('authFiles.action.refreshQuota')}</button>
+                      <button type="button" className="auth-list-action" onClick={() => setSettingsName(name)} disabled={busy || resettingCooldown || !isOAuthCredentialFile(file)} title={t(isOAuthCredentialFile(file) ? 'authFiles.settings.title' : 'authFiles.fileOnly')}>{t('authFiles.action.settings')}</button>
+                      <button type="button" className="auth-list-action" onClick={() => setModelViewName(name)} disabled={busy || !providerKey(file)} title={t('authFiles.models.viewTitle')}>{t('authFiles.action.models')}</button>
+                      <button type="button" className="auth-list-action muted" onClick={() => void copyName(name)} disabled={busy} title={t('authFiles.copyName')}>{copied === name ? <Check size={14} aria-hidden="true" /> : null}{t('authFiles.action.copy')}</button>
+                      <button type="button" className="auth-list-action danger" onClick={() => void deleteFile(file)} disabled={busy || resettingCooldown || isRuntimeOnly(file)} title={t('common.delete')}>{t('common.delete')}</button>
                     </div>
                     <div className="auth-list-main-actions">
                       <button type="button" className="auth-list-switch" role="switch" aria-checked={!disabled} aria-label={`${t(disabled ? 'common.enable' : 'common.disable')} ${identity || name}`} onClick={() => void toggleStatus(file)} disabled={busy || resettingCooldown || !isOAuthCredentialFile(file)} title={t(isOAuthCredentialFile(file) ? disabled ? 'common.enable' : 'common.disable' : 'authFiles.fileOnly')}><span /></button>
diff --git a/src/styles/feature-pages.css b/src/styles/feature-pages.css
index 6c2d210..fdfc955 100644
--- a/src/styles/feature-pages.css
+++ b/src/styles/feature-pages.css
@@ -3498,8 +3498,9 @@
   flex: 1 1 auto;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-right: 4px;
-  scrollbar-gutter: stable;
+  padding-right: 0;
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
 }
 
 @media (min-width: 761px) {
diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css
index 084e8fb..75df03a 100644
--- a/src/styles/ui-refinements.css
+++ b/src/styles/ui-refinements.css
@@ -863,19 +863,26 @@ body, html, #root {
 }
 
 /* Agent List & Config Scrollbar Polish */
-.agent-list-items::-webkit-scrollbar,
-.agent-config-scroll-region::-webkit-scrollbar {
+.agent-list-items::-webkit-scrollbar {
   width: 6px;
 }
 
-.agent-list-items::-webkit-scrollbar-thumb,
-.agent-config-scroll-region::-webkit-scrollbar-thumb {
+.agent-config-scroll-region {
+  scrollbar-width: none;
+}
+
+.agent-config-scroll-region::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.agent-list-items::-webkit-scrollbar-thumb {
   background: var(--border-primary);
   border-radius: 4px;
 }
 
-.agent-list-items::-webkit-scrollbar-track,
-.agent-config-scroll-region::-webkit-scrollbar-track {
+.agent-list-items::-webkit-scrollbar-track {
   background: transparent;
 }
 
diff --git a/tests/auth-file-list-ui.cjs b/tests/auth-file-list-ui.cjs
index a725650..b3b0d12 100644
--- a/tests/auth-file-list-ui.cjs
+++ b/tests/auth-file-list-ui.cjs
@@ -58,9 +58,9 @@ const fs = require('node:fs/promises');
       assert.equal(await card(1).getByRole('switch').isVisible(), true);
       assert.equal(await card(1).locator('.auth-list-details-button').isVisible(), true);
       assert.equal(await card(1).locator('.auth-list-details').isVisible(), false, `${label}: file metadata and the expanded request summary start collapsed`);
-      if (width >= 1280) {
+      if (width >= 1800) {
         const heights = await page.locator('.auth-credential-row').evaluateAll(nodes => nodes.map(node => node.getBoundingClientRect().height));
-        assert.ok(heights.every(height => height >= 88 && height <= 120), `${label}: dense desktop rows stay near 104px, including quota footnotes: ${JSON.stringify(heights)}`);
+        assert.ok(heights.every(height => height >= 88 && height <= 190), `${label}: desktop rows stay compact, allowing labeled actions to wrap: ${JSON.stringify(heights)}`);
         const cells = await card(1).locator('.auth-credential-row > .auth-list-cell').evaluateAll(nodes => nodes.map(node => {
           const bounds = node.getBoundingClientRect(); return { left: bounds.left, right: bounds.right };
         }));
@@ -74,7 +74,7 @@ const fs = require('node:fs/promises');
     assert.equal(await previous().isDisabled(), true);
     assert.ok((await pagination().innerText()).includes('1 / 2'));
     assert.equal(await page.locator('.auth-file-list-head > span').count(), 7);
-    await assertMainInformation('initial desktop', 1800);
+    await assertMainInformation('initial desktop', 1500);
     assert.equal(await card(2).locator('.auth-file-health-compact').isVisible(), true, 'Cooldown summary is directly visible below the main row');
     assert.equal(await card(2).locator('.auth-health-body').isVisible(), false, 'Individual cooldown records start collapsed');
     assert.equal(await card(2).getByRole('button', { name: '清除冷却', exact: true }).isVisible(), true, 'Clear cooldown is available without opening file details');
@@ -244,6 +244,35 @@ const fs = require('node:fs/promises');
     await page.locator('.auth-file-table-scroll').screenshot({ path: path.join(screenshotDir, 'reference-small-idle-preview.png') });
     assert.deepEqual(errors, []);
     assert.deepEqual(externalRequests, []);
+    await page.goto(`${base}/tests/fixtures/auth-file-list.html?displayCases=1&locale=zh-CN&theme=light`);
+    await cards().nth(5).waitFor();
+    assert.equal(await cards().count(), 6, 'Display fixture renders every representative credential');
+    const disabledBadges = page.locator('.auth-status-badge.neutral');
+    assert.equal(await disabledBadges.count(), 5, 'Every disabled credential uses the neutral status treatment');
+    for (const badge of await disabledBadges.all()) assert.equal(await badge.innerText(), '已停用');
+    assert.equal(await page.locator('.auth-status-badge.success').innerText(), '可用');
+    const actionLabels = ['刷新', '设置', '模型', '复制', '删除'];
+    for (const label of actionLabels) {
+      const action = cards().first().getByRole('button', { name: label, exact: true });
+      assert.equal(await action.innerText(), label, `${label} is a visible text button`);
+      assert.equal(await action.locator('svg title').count(), 0, `${label} does not rely on an icon-only label`);
+    }
+    assert.equal(await cards().last().locator('.credential-quota-row-detail').innerText(), '付费 API 对话可用。xAI 暂不为此 OAuth 凭证提供额度总量数据。');
+    for (const width of [1680, 1366, 1180, 980, 390]) {
+      await page.setViewportSize({ width, height: 1000 });
+      const collisions = await page.locator('.auth-file-card').evaluateAll(nodes => nodes.flatMap(card => {
+        const buttons = [...card.querySelectorAll('.auth-card-actions button')].filter(button => button.getClientRects().length);
+        const boxes = buttons.map(button => button.getBoundingClientRect());
+        return boxes.flatMap((box, index) => boxes.slice(index + 1)
+          .filter(other => box.left < other.right - 1 && other.left < box.right - 1 && box.top < other.bottom - 1 && other.top < box.bottom - 1)
+          .map(other => ({ width: innerWidth, texts: [buttons[index].textContent, buttons[boxes.indexOf(other)].textContent] })));
+      }));
+      assert.deepEqual(collisions, [], `${width}: credential actions overlap ${JSON.stringify(collisions)}`);
+      const quotaOverflow = await page.locator('.auth-list-quota').evaluateAll(nodes => nodes.filter(node => node.scrollWidth > node.clientWidth + 1).map(node => node.textContent));
+      assert.deepEqual(quotaOverflow, [], `${width}: quota content overflows its column`);
+      await page.screenshot({ path: path.join(screenshotDir, `display-cases-${width}.png`), fullPage: true });
+    }
+
     console.log('PASS: offline seven-column dense credential list with visible request/runtime/quota/action data, compact row height, exact quota percentages/reset timestamps, unknown quota, ten/two pagination, search/provider/status reset, page size twenty, additional quota disclosure, main-row and detail-summary request keyboard tooltips, directly visible cooldown controls, exact status PATCH, direct delete confirmation/cancel, small idle accounts without pagination, light/dark Chinese/English 1800/1280/1024/390 without page or card overflow, contained table scrolling only at intermediate widths.');
     console.log(`Screenshots: ${screenshotDir}`);
   } finally { await browser?.close(); await server.close(); }
diff --git a/tests/claude-code-model-inputs-ui.cjs b/tests/claude-code-model-inputs-ui.cjs
index 87c4724..437dc06 100644
--- a/tests/claude-code-model-inputs-ui.cjs
+++ b/tests/claude-code-model-inputs-ui.cjs
@@ -15,7 +15,7 @@ const os = require('node:os');
     assert.equal(await startup.inputValue(), 'sonnet');
     await page.locator('.claude-role-row .agent-model-trigger').first().click();
     await page.getByRole('option', { name: /gpt-two/ }).click();
-    await page.getByText('sonnet → gpt-two', { exact: true }).waitFor();
+    assert.equal(await page.locator('.claude-code-model-summary').count(), 0);
     assert.equal(await startup.inputValue(), 'sonnet');
     await startup.click();
     await page.getByRole('option', { name: /^gpt-two / }).click();
diff --git a/tests/claude-code-model-layout-ui.cjs b/tests/claude-code-model-layout-ui.cjs
new file mode 100644
index 0000000..441c781
--- /dev/null
+++ b/tests/claude-code-model-layout-ui.cjs
@@ -0,0 +1,71 @@
+// Run Vite on port 1421, or set AGENT_MODEL_LAYOUT_TEST_URL to another local server.
+const { chromium } = require(process.env.PLAYWRIGHT_MODULE || 'playwright');
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const os = require('node:os');
+const base = process.env.AGENT_MODEL_LAYOUT_TEST_URL || 'http://127.0.0.1:1421';
+
+(async () => {
+  const browser = await chromium.launch({ channel: 'msedge', headless: true, args: ['--no-proxy-server'] });
+  try {
+    const page = await browser.newPage();
+    page.setDefaultTimeout(10000);
+    const errors = [];
+    page.on('pageerror', error => errors.push(String(error)));
+    for (const locale of ['zh-CN', 'en', 'ja']) {
+      for (const theme of ['light', 'dark']) {
+        for (const width of [1392, 1100, 760, 480]) {
+          await page.setViewportSize({ width, height: 962 });
+          await page.goto(`${base}/tests/fixtures/agent-backups.html?client=claude-code&reset-selections&shell&claude-alias-layout&locale=${locale}&theme=${theme}`);
+          await page.locator('.claude-role-row[data-role=sonnet] .agent-model-trigger small').waitFor();
+          await page.evaluate(() => document.fonts.ready);
+          const issues = await page.locator('.claude-role-table').evaluate(table => {
+            const issues = [];
+            for (const row of table.querySelectorAll('.claude-role-row')) {
+              const trigger = row.querySelector('.agent-model-trigger');
+              const bounds = trigger.getBoundingClientRect();
+              for (const text of trigger.querySelectorAll('strong, small')) {
+                const rect = text.getBoundingClientRect();
+                if (rect.top < bounds.top - 1 || rect.bottom > bounds.bottom + 1
+                  || rect.left < bounds.left - 1 || rect.right > bounds.right + 1) {
+                  issues.push(`${row.dataset.role}: model text exceeds the selector`);
+                }
+              }
+              const next = row.nextElementSibling?.getBoundingClientRect();
+              if (next && bounds.bottom > next.top + 1) issues.push(`${row.dataset.role}: selector overlaps the next row`);
+              if (row.scrollWidth > row.clientWidth + 1) issues.push(`${row.dataset.role}: horizontal overflow`);
+              const toggle = row.querySelector('.claude-inline-context').getBoundingClientRect();
+              if (bounds.right > toggle.left + 1) issues.push(`${row.dataset.role}: selector overlaps the context switch`);
+            }
+            return issues;
+          });
+          assert.deepEqual(issues, [], `${locale}/${theme}/${width}`);
+          if (locale === 'zh-CN' && theme === 'light' && [1392, 480].includes(width)) {
+            await page.screenshot({ path: path.join(os.tmpdir(), `claude-code-model-layout-${width}.png`), fullPage: true });
+          }
+        }
+      }
+    }
+    await page.setViewportSize({ width: 1392, height: 962 });
+    await page.goto(`${base}/tests/fixtures/agent-backups.html?client=claude-code&reset-selections&shell&claude-alias-layout`);
+    const sonnet = page.locator('.claude-role-row[data-role=sonnet]');
+    await sonnet.locator('.agent-model-trigger small').waitFor();
+    await page.locator('.agent-claude-desktop-mapping-filter input').check();
+    const trigger = sonnet.locator('.agent-model-trigger');
+    await trigger.click();
+    await page.getByRole('option', { name: /^gpt-6\.1-sol / }).click();
+    assert.equal(await trigger.locator('small').count(), 0);
+    await trigger.focus();
+    await trigger.press('Enter');
+    await sonnet.locator('.agent-model-search input').fill('high-fast');
+    await page.getByRole('option', { name: /^gpt-6.1-sol-high-fast / }).click();
+    assert.equal(await trigger.locator('small').innerText(), 'gpt-6.1-sol');
+    await page.getByRole('switch', { name: 'sonnet 1M', exact: true }).check();
+    await page.getByRole('button', { name: '更新配置', exact: true }).click();
+    await page.waitForFunction(() => window.fixtureCalls.some(call => call.cmd === 'update_agent_config'
+      && call.args.claudeCodeModelMappings.sonnet === 'gpt-6.1-sol-high-fast'
+      && call.args.claudeCodeModelMappings.sonnet1m === true));
+    assert.deepEqual(errors, []);
+    console.log('PASS: 24 viewport/language/theme layouts, alias selection, keyboard search, context toggle and configuration update');
+  } finally { await browser.close(); }
+})().catch(error => { console.error(error); process.exitCode = 1; });
diff --git a/tests/fixtures/agent-backups.tsx b/tests/fixtures/agent-backups.tsx
index 397822d..d5eb084 100644
--- a/tests/fixtures/agent-backups.tsx
+++ b/tests/fixtures/agent-backups.tsx
@@ -13,6 +13,12 @@ const ids = ['claude-code','claude-desktop','codex','opencode','openclaw','herme
 let count=0; let backupCount=0; const backups:any[]=[]; let currentModel=params.has('fresh')?null:'gpt-one';
 let nativeOauth=params.has('native-oauth'); let nativeSwitchCount=0; let codexClosed=false; let closeCount=0;
 let currentOauth=false; const currentMappings:Record<string,any>={};
+const claudeAliasLayoutModels = [
+ {name:'gpt-6.1-sol-high-fast',alias:'gpt-6.1-sol',isAlias:true},
+ {name:'gpt-6.1-sol',isAlias:true},
+ {name:'provider/very-long-upstream-model-name-with-reasoning-high',alias:'provider/very-long-original-model-name-with-context-window',isAlias:true},
+];
+if(params.has('claude-alias-layout'))currentMappings['claude-code']={opus:claudeAliasLayoutModels[0].name,sonnet:claudeAliasLayoutModels[0].name,fable:claudeAliasLayoutModels[1].name,haiku:claudeAliasLayoutModels[2].name,startupModel:'opus',subagentModel:''};
 if(params.has('legacy-desktop'))currentMappings['claude-desktop']={opus:'gpt-one',sonnet:'gpt-two',haiku:'gpt-one',opus1m:true};
 if(params.has('legacy-desktop-direct'))currentMappings['claude-desktop']={opus:'',sonnet:'claude-sonnet-custom-7',haiku:'',desktopModels:[{model:'',alias:'claude-sonnet-custom-7',context1m:false}]};
 if(params.has('saved-desktop-alias'))currentMappings['claude-desktop']={opus:'',sonnet:'gpt-one',haiku:'',desktopModels:[{model:'gpt-one',alias:'claude-opus-5',context1m:false}]};
@@ -65,6 +71,7 @@ mockIPC(async (cmd,args:any) => {
    nativeOauth=true; return {outcome:'updated'};
  }
  if(cmd==='get_agent_models') {
+   if(params.has('claude-alias-layout'))return claudeAliasLayoutModels;
    if(params.has('no-models'))return [];
    if(params.has('no-core'))throw new Error('CPA core is offline');
    if(params.has('defer-models'))await new Promise<void>(resolve=>{(window as any).fixtureFinishModels=resolve;});
diff --git a/tests/fixtures/auth-file-list.tsx b/tests/fixtures/auth-file-list.tsx
index c1aa946..819f7df 100644
--- a/tests/fixtures/auth-file-list.tsx
+++ b/tests/fixtures/auth-file-list.tsx
@@ -14,15 +14,20 @@ document.documentElement.dataset.theme = params.get('theme') || 'light';
 const startedAt = Date.now();
 const smallList = params.has('small');
 type Request = { path: string; method: string; body?: Record<string, unknown>; query?: Record<string, string> };
-const files: Record<string, unknown>[] = Array.from({ length: smallList ? 3 : 12 }, (_, index) => ({
-  name: `${String(index + 1).padStart(2, '0')}-account.json`,
-  email: index === 0 ? 'long-fictional-account-for-layout@example.test' : `account-${index + 1}@example.test`,
-  auth_index: `fixture-account-${index + 1}`, provider: smallList ? ['codex', 'devin', 'xai'][index] : index === 3 ? 'claude' : index === 4 ? 'xai' : 'codex',
+const displayCases = params.has('displayCases');
+const files: Record<string, unknown>[] = Array.from({ length: displayCases ? 6 : smallList ? 3 : 12 }, (_, index) => ({
+  name: displayCases
+    ? ['antigravity-very-long-account-name-for-layout.json', 'codex-team-subscription.json', 'codex-free-disabled.json', 'devin-user-layout-check.json', 'kimi-layout-check.json', 'xai-paid-account.json'][index]
+    : `${String(index + 1).padStart(2, '0')}-account.json`,
+  email: displayCases
+    ? ['sasaki245668-layout-check@example.test', '1154606263-layout-check@example.test', 'lzt404rum-codex-layout@example.test', 'lzt404rum-devin-layout@example.test', 'kimi-layout-check@example.test', 'lori-doyle-layout-check@example.test'][index]
+    : index === 0 ? 'long-fictional-account-for-layout@example.test' : `account-${index + 1}@example.test`,
+  auth_index: `fixture-account-${index + 1}`, provider: displayCases ? ['antigravity', 'codex', 'codex', 'devin', 'kimi', 'xai'][index] : smallList ? ['codex', 'devin', 'xai'][index] : index === 3 ? 'claude' : index === 4 ? 'xai' : 'codex',
   ...(params.has('longQuota') ? { provider: 'antigravity' } : {}),
   source: 'file', size: 1800 + index * 350, updated_at: '2026-10-01T00:00:00Z',
-  disabled: smallList ? index !== 1 : index === 2 || index === 6,
-  status: (smallList ? index !== 1 : index === 2 || index === 6) ? 'disabled' : 'active',
-  priority: smallList ? 0 : index % 3, plan_type: smallList ? index === 0 ? 'Team' : '' : index % 3 === 0 ? 'Pro 20x' : 'Team',
+  disabled: displayCases ? index < 5 : smallList ? index !== 1 : index === 2 || index === 6,
+  status: (displayCases ? index < 5 : smallList ? index !== 1 : index === 2 || index === 6) ? 'disabled' : 'active',
+  priority: displayCases || smallList ? 0 : index % 3, plan_type: displayCases ? ['', 'Team', 'Free', '', '', 'Paid'][index] : smallList ? index === 0 ? 'Team' : '' : index % 3 === 0 ? 'Pro 20x' : 'Team',
   note: index === 0 ? 'Fictional account note, visible after opening credential details.' : '',
   success: smallList ? 0 : 1200 + index * 2450, failed: smallList ? 0 : 3 + index * 97,
   recent_requests: Array.from({ length: smallList ? 0 : 20 }, (_, bucket) => ({
@@ -35,13 +40,13 @@ const files: Record<string, unknown>[] = Array.from({ length: smallList ? 3 : 12
 }));
 
 updateQuotaCache(Object.fromEntries(files.map((file, index) => {
-  if (smallList) return [quotaKey(file), { status: 'idle', rows: [] } satisfies QuotaState];
+  if (smallList || (displayCases && index < 5)) return [quotaKey(file), { status: 'idle', rows: [] } satisfies QuotaState];
   const quota: QuotaState = {
     status: 'success', plan: String(file.plan_type),
     subscriptionActiveUntil: index === 0 ? '2026-11-01T00:00:00Z' : undefined,
     resetCredits: index === 0 ? 2 : undefined,
     resetCreditsApplicable: index === 0 ? 0 : undefined,
-    rows: index === 4 ? [{ label: 'Paid API account', remainingPercent: null, detail: 'Upstream does not report remaining quota.' }]
+    rows: displayCases || index === 4 ? [{ label: '付费 API 账号', remainingPercent: null, detail: '付费 API 对话可用。xAI 暂不为此 OAuth 凭证提供额度总量数据。' }]
       : [
         { label: '5h', remainingPercent: index === 1 ? 0 : index === 2 ? 8 : 72 - index * 3, resetAtMs: startedAt + 3 * 3600000 },
         { label: 'Weekly', remainingPercent: 83 - index * 5, resetAtMs: startedAt + 5 * 86400000 },