From f97e367ddec84c448e6652517f1c921a6755ef87 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 7 Jun 2026 19:53:58 +0800
Subject: [PATCH] fix(header): expand public header full-width and stop nav
 text clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 ...7-public-header-expand-and-nav-clip-fix.md | 40 +++++++++++++++++++
 src/index.css                                 |  8 ----
 src/layouts/PublicLayout.tsx                  | 17 ++++----
 3 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 .unipi/docs/fix/2026-06-07-public-header-expand-and-nav-clip-fix.md

diff --git a/.unipi/docs/fix/2026-06-07-public-header-expand-and-nav-clip-fix.md b/.unipi/docs/fix/2026-06-07-public-header-expand-and-nav-clip-fix.md
new file mode 100644
index 0000000..95e6056
--- /dev/null
+++ b/.unipi/docs/fix/2026-06-07-public-header-expand-and-nav-clip-fix.md
@@ -0,0 +1,40 @@
+---
+title: "公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix"
+type: quick-fix
+date: 2026-06-07
+---
+
+# 公共 Header 宽屏可扩展 & 导航文字裁切修复 — Quick Fix
+
+## Bug
+1. 桌面 Header 内容固定在 `max-w-[1280px]`，更宽的视口下不能 expand，左右出现大面积空白。
+2. 在中等宽度（约 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`。
+- `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]`；如需主内容也跟随扩展，可后续单独调整。
diff --git a/src/index.css b/src/index.css
index 6c804cc..367312f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -50,14 +50,6 @@ header button {
   }
 }
 
-.header-nav-scroll {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.header-nav-scroll::-webkit-scrollbar {
-  display: none;
-}
-
 .gold-underline {
   box-shadow: inset 0 -2px 0 #eeb726;
 }
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index ea218a1..e3afdcb 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -610,9 +610,12 @@ export function PublicLayout() {
           </div>
         </div>
 
-        <div className="mx-auto hidden max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-6">
-          {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
-          <div className="flex h-10 items-center gap-2 min-[1000px]:gap-0 lg:gap-4">
+        <div className="hidden w-full px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-10">
+          {/* Single row (md+): logo | nav | search + language. Header now spans
+              the full viewport so wide monitors get more breathing room, and
+              the nav switches to the burger menu at `xl` so it never has to
+              clip / horizontally-scroll the labels. */}
+          <div className="flex h-10 items-center gap-2 xl:gap-4">
             <div className="flex min-w-0 shrink items-center gap-2.5 text-xl font-bold tracking-wide text-ark-gold">
               {/* Logo → home; page-name text → scroll to top of the current page. */}
               <Link
@@ -638,7 +641,7 @@ export function PublicLayout() {
             </div>
 
             <nav
-              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-0.5 min-[1000px]:flex lg:gap-5"
+              className="hidden min-w-0 flex-1 items-center justify-center gap-4 py-0.5 xl:flex xl:gap-5"
               aria-label={t("mainNav")}
             >
               <Link
@@ -685,7 +688,7 @@ export function PublicLayout() {
               </Link>
             </nav>
 
-            <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1000px]:flex-none">
+            <div className="flex min-w-0 flex-1 items-center justify-end gap-2 xl:flex-none">
               <div ref={desktopSearchRef} className="hidden md:block">
                 <button
                   type="button"
@@ -726,7 +729,7 @@ export function PublicLayout() {
               <button
                 ref={desktopMenuButtonRef}
                 type="button"
-                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1000px]:hidden"
+                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg xl:hidden"
                 onClick={() => {
                   setDesktopSearchOpen(false);
                   setOpen((v) => !v);
@@ -743,7 +746,7 @@ export function PublicLayout() {
       {open ? (
         <div
           ref={menuRef}
-          className={`${headerMenuAnimationClass} fixed inset-x-0 bottom-0 top-[64px] z-50 flex flex-col bg-ark-bg/90 backdrop-blur-xl md:top-[70px] min-[1000px]:hidden`}
+          className={`${headerMenuAnimationClass} fixed inset-x-0 bottom-0 top-[64px] z-50 flex flex-col bg-ark-bg/90 backdrop-blur-xl md:top-[70px] xl:hidden`}
         >
           <nav className="flex-1 overflow-y-auto px-5">
             {(