f97e367dde
Some checks failed
Deploy to Frontend Servers / deploy (push) Failing after 58s
- Drop max-w-[1280px] on the desktop header inner row so the header
expands with wider viewports instead of staying capped.
- Move the inline nav / burger toggle from min-[1000px] to xl (1280px)
so the nav only appears when all six items have enough room. The old
threshold relied on overflow-x-auto, which clipped the first/last
characters ("ll assets", "Popula").
- Remove the now-unused .header-nav-scroll CSS along with the scroll
fallback wiring on the nav element.
Mid-width viewports (1000–1280px) now show the burger drawer instead
of a horizontally-scrolled nav. main content stays at max-w-[1280px]
on purpose.
2.5 KiB
2.5 KiB
title, type, date
| title | type | date |
|---|---|---|
| 公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix | quick-fix | 2026-06-07 |
公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix
Bug
- 桌面 Header 内容固定在
max-w-[1280px]，更宽的视口下不能 expand，左右出现大面积空白。 - 在中等宽度（约 1000–1280px）
<nav>通过overflow-x-auto横向滚动来塞 6 个导航项，结果首尾字符被滚动容器边缘切掉，看起来像 "All assets" 变成 "ll assets"、"Popular" 变成 "Popula"，类似被 overlay 挡住。
Root Cause
PublicLayout.tsx桌面 Header 内层容器固定mx-auto max-w-[1280px]，限制了宽屏扩展。- nav 在
min-[1000px]就显示出来，但实际所需宽度（≈1230px）大于该断点下的可用空间，于是用overflow-x-auto做兜底，造成视觉裁切。
Fix
- 移除 Header 桌面内层容器的
max-w-[1280px]，改用w-full，宽屏会自然 expand 到视口宽度。 - 将 nav 与移动菜单按钮的显示断点从
min-[1000px]提升到xl（1280px），nav 出现时永远有足够空间，不需要横向滚动。 - 删除 nav 上的
overflow-x-auto overflow-y-hidden和header-nav-scroll类，以及index.css中废弃的.header-nav-scroll规则。
Files Modified
src/layouts/PublicLayout.tsx- Header 桌面行：
mx-auto max-w-[1280px] xl:px-6→w-full xl:px-10，整体可随视口扩展。 - nav：
min-[1000px]:flex→xl:flex，去掉overflow-x-auto与header-nav-scroll。 - 右侧操作区与桌面 burger：
min-[1000px]:*→xl:*，保持与 nav 同步切换。 - 移动菜单抽屉：
min-[1000px]:hidden→xl:hidden。
- Header 桌面行：
src/index.css— 移除已无用的.header-nav-scroll规则。
Verification
npx tsc --noEmit通过。npm run format:check通过。npm test全 49 测试通过。- 行为预期：
- 视口 ≥1280px：nav 完整显示，无任何边缘裁切；Header 内容随视口加宽继续 expand。
- 视口 <1280px：自动切换到 burger 抽屉（原本 1000–1280 的横向滚动 nav 不再出现）。
Notes
- 中等宽度（1000–1280）原本能直接看到 nav，现在改成 burger，这是为了完全消除文字裁切。是否要保留中等宽度的 nav 是设计取舍，目前以用户「不允许文字被裁」的要求为优先。
- 主内容
<main>仍保留max-w-[1280px]；如需主内容也跟随扩展，可后续单独调整。