fix(ui-settings-account): center collapsed account avatar

packages/client/ui-settings-account/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-settings-account/README.md
-README.md: e27803ee5ac9ebc3d96a4f77f179bfa696c6bbbf
-README.zh.md: 24ebc4e9afb76d5db5b6a701707556699717829e
+README.md: cc21a5da7c75ece0155653eeb29a4dd7459d90bb
+README.zh.md: 6376ea5eed7e97abb61e52b03a69131b54f99916

packages/client/ui-settings-account/README.md

@@ -20,7 +20,7 @@ The Account settings section displays DeepSeek login state and offers browser si
 <a id="use-this-package"></a>
 ## Use this package
 
-The sidebar and Account settings display the profile avatar as a circular image, with the account icon as fallback when the URL is absent or the image fails to load.
+The sidebar and Account settings display the profile avatar as a circular image, with the account icon as fallback when the URL is absent or the image fails to load. The collapsed sidebar centers the avatar in a 36 × 36 px button.
 
 The section registers through settings.section and uses the account Remote namespace. The stream survives carrier reconnects through the shared Remote supervisor. The page renders feature-owned English and Chinese copy and keeps API keys separate from account state.
 

packages/client/ui-settings-account/README.zh.md

@@ -20,7 +20,7 @@ kind: "package-reference"
 <a id="use-this-package"></a>
 ## 使用此包
 
-侧边栏和账号设置以圆形图片显示账号头像；头像 URL 缺失或图片加载失败时使用账号图标兜底。
+侧边栏和账号设置以圆形图片显示账号头像；头像 URL 缺失或图片加载失败时使用账号图标兜底。折叠侧边栏将头像居中放置在 36 × 36 px 的按钮内。
 
 该页面通过 settings.section 注册，并使用 account Remote 命名空间。共享 Remote 管理器负责连接恢复后的流重连。页面使用功能自有的中英文文案，将 API Key 与账号状态分开。
 

packages/client/ui-settings-account/src/client/AccountMenu.module.css

@@ -1,6 +1,7 @@
 .root { flex: 1; min-width: 0; }
 .anchor { width: 100%; }
 .trigger { user-select: none; display: flex; align-items: center; width: 100%; gap: 8px; padding: 6px; border: 0; border-radius: 12px; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 14px; cursor: pointer; }
+.trigger[data-collapsed='true'] { box-sizing: border-box; width: 36px; height: 36px; justify-content: center; gap: 0; padding: 0; }
 .trigger:hover { background: var(--dsw-alias-interactive-bg-hover); }
 .avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--dsw-alias-bg-skeleton); color: var(--dsw-alias-label-tertiary); }
 .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

packages/client/ui-settings-account/src/client/AccountMenu.tsx

@@ -35,7 +35,7 @@ export function AccountMenu({
   }
   return <div className={css.root}>
     <Menu open={open} side="top" portal autoFocus className={css.anchor}
-      anchor={<button type="button" className={css.trigger} aria-label={t('menu')}
+      anchor={<button type="button" className={css.trigger} data-collapsed={!wide} aria-label={t('menu')}
         aria-haspopup="menu" aria-expanded={open} onClick={() => { setOpen(value => !value) }}>
         <span className={css.avatar}><AccountAvatar url={signedIn && profile?.status === 'ready' ? profile.value.avatarUrl : null} /></span>
         {wide && <span className={css.label}>{signedIn ? label : t('signedOut')}</span>}