fix(web): 恢复移动端 Header 的 GitHub/X 链接 (#81)

* fix(web): restore GitHub/X links in mobile header

上一个 PR (#80) 为缓解 Header 移动端拥挤,给 GitHub/X 图标加了
hidden sm:inline-flex,导致手机端(<640px)看不到这两个入口。
横向溢出的真正元凶(导入按钮负偏移)已在 #80 修复,Header 全显示
不会重新引入左右滑动,故恢复图标在所有视口常驻显示。

* fix(web): 移动端 UserChip 只显示头像,宽度与其他图标按钮对齐

登录态 UserChip 之前是「头像 + 名字」的宽按钮(≈90px),
是齿轮/GitHub/X 图标按钮(≈16px)的 5-6 倍,导致 Header
右侧集群宽度在登录/未登录切换时剧烈变化,所有按钮位置大幅偏移。

改动:
- 去掉名字显示,只保留头像圆圈
- 头像尺寸 h-5→h-4(16px,与图标按钮一致)
- 按钮 padding 收窄至 p-0.5(总宽≈22px)
- 加 title 属性保留完整用户名(hover 可见)
- 移除开发过程中使用的 mock 登录态临时代码
This commit is contained in:
Zonghao Yuan
2026-06-15 15:28:24 +08:00
committed by GitHub
parent ba9f9c1342
commit dc08f64ec1
2 changed files with 9 additions and 6 deletions
+4 -4
View File
@@ -59,21 +59,21 @@ export function UserChip({
<button
type="button"
onClick={() => setMenuOpen((v) => !v)}
className="flex items-center gap-2 rounded-full border border-cream-50/15 bg-cream-50/[0.06] pl-1.5 pr-3 py-1 text-[11px] text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
className="flex items-center justify-center rounded-full border border-cream-50/15 bg-cream-50/[0.06] p-0.5 text-cream-50/80 transition-colors hover:bg-cream-50/[0.12]"
title={label}
>
{avatarUrl ? (
<img
src={avatarUrl}
alt=""
className="h-5 w-5 rounded-full object-cover"
className="h-4 w-4 rounded-full object-cover"
referrerPolicy="no-referrer"
/>
) : (
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[10px] font-medium text-cream-50">
<span className="flex h-4 w-4 items-center justify-center rounded-full bg-[rgba(175,138,72,0.6)] text-[9px] font-medium text-cream-50">
{initial}
</span>
)}
<span className="max-w-[100px] truncate">{label}</span>
</button>
{menuOpen && (
<>