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:
@@ -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 && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user