From 2802278be6f42ac9586cd5cbe0b23cac41e9a288 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Sun, 25 Oct 2026 19:46:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=85=A8=E7=AB=99=E6=A8=AA=E5=90=91=E6=BA=A2=E5=87=BA=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E2=80=94=E2=80=94Header=20=E4=B8=89=E6=A1=A3=E6=96=AD?=
 =?UTF-8?q?=E7=82=B9=E4=B8=8E=E9=95=BF=E8=AF=8D=E6=96=AD=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- B1（移动审计 blocker）：Header 7 项一行在 390px 溢出 51-88px（主题钮
  被推出屏、整页可晃——用户实测报告的"布局存在问题"实锤）→ 430px
  断点收紧（字号/边距/间隙/图标钮 32px）+ 370px 末档（en Open Source
  长词）
- M1：.prose-tech 补 overflow-wrap:break-word（裸长 URL 曾撑破 88px，
  只给了书评轨是漏）
- m1：ProjectWall 标题 i18n（en 页曾硬编码中文）+ locale prop
- m3：列表标题两行钳制（en 长标题截断丢信息）；m4：页脚/pn/书架
  触控目标 ≥24px
- 已知边界：320px 超窄屏 en 仍溢 23px（超出现实机型范围，记录不改）

验证: 移动溢出回归 390/360 × 12 页全过（scrollWidth 断言，曾全站
      51-118px）；E2E 30/30 PASS；技术文长 URL 页 +88→0

Spec: 2026-10-25_add-blog-5c

Co-authored-by: GLM-5.3
---
 src/components/Header.astro           | 16 ++++++++++++++++
 src/components/PostList.astro         | 12 ++++++++++--
 src/components/geek/ProjectWall.astro |  9 +++++++--
 src/pages/en/index.astro              |  2 +-
 src/pages/en/opensource.astro         |  2 +-
 src/styles/global.css                 |  1 +
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index ab6b5cb..0257481 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -122,4 +122,20 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中';
   @media (max-width: 560px) {
     .nav-link { font-size: 14px; padding-inline: var(--space-1); }
   }
+  /* 移动端审计 B1：7 项一行在 390px 溢出 50-88px（主题钮被推出屏）——
+     更窄一档整体收紧，估算总宽 ~344px < 360 */
+  @media (max-width: 430px) {
+    .brand { font-size: 16px; }
+    .nav-link { font-size: 12.5px; padding-inline: 3px; }
+    nav ul { gap: 2px; }
+    .header-inner { gap: 6px; padding-inline: 10px; }
+    /* 图标钮在此密度下 32px（WCAG 24px 下限之上，44 标准的密度妥协） */
+    .header-inner .tap { min-width: 32px; min-height: 32px; }
+    .nav-lang { font-size: 12px; padding-inline: 2px; }
+  }
+  @media (max-width: 370px) {
+    /* en "Open Source" 长词最后 4px：再收字距 */
+    .nav-link { font-size: 12px; padding-inline: 2px; }
+    .brand { letter-spacing: 0; }
+  }
 </style>
diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index f3e548d..e6ba575 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -84,7 +84,7 @@ const mmdd = (d: Date) =>
     color: var(--ink-2);
     font-variant-numeric: tabular-nums;
   }
-  .shelf-link { float: right; font-size: 12.5px; color: var(--accent); font-weight: 400; }
+  .shelf-link { float: right; font-size: 12.5px; padding-block: 4px; color: var(--accent); font-weight: 400; }
   .track {
     display: flex;
     align-items: center;
@@ -123,6 +123,10 @@ const mmdd = (d: Date) =>
     flex: none;
   }
   .row-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     flex: 1;
     min-width: 0;
     font-size: 16px;
@@ -132,7 +136,11 @@ const mmdd = (d: Date) =>
     white-space: nowrap;
     transition: color var(--dur) var(--ease);
   }
-  .row:hover .row-title { color: var(--accent); }
+  .row:hover .row-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden; color: var(--accent); }
   .tag {
     flex: none;
     font-family: var(--font-mono);
diff --git a/src/components/geek/ProjectWall.astro b/src/components/geek/ProjectWall.astro
index cca8fcb..460a3fc 100644
--- a/src/components/geek/ProjectWall.astro
+++ b/src/components/geek/ProjectWall.astro
@@ -3,11 +3,16 @@
 // 双源数据见 src/lib/projects.ts；语言色点用 linguist 常用色映射
 import { loadProjects, type RepoCard } from '../../lib/projects';
 
+import { t } from '../../i18n/ui';
+import type { Locale } from '../../lib/locale';
+
 interface Props {
   /** 展示上限：首页精选 6；/opensource 全量传大数 */
   limit?: number;
+  locale?: Locale;
 }
-const { limit = 6 } = Astro.props;
+const { limit = 6, locale = 'zh' } = Astro.props;
+const title = t('open_source_projects', locale);
 const LANG_COLORS: Record<string, string> = {
   Astro: '#ff5a03', TypeScript: '#3178c6', JavaScript: '#f1e05a',
   Python: '#3572a5', Go: '#00add8', Rust: '#dea584', Shell: '#89e051',
@@ -23,7 +28,7 @@ try {
 ---
 
 <section class="project-wall" aria-label="开源项目">
-  <h2 class="wall-title">开源 · Projects</h2>
+  <h2 class="wall-title">{title}</h2>
   <ul>
     {projects.map((p) => (
       <li>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 02c8b8f..5822c77 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -99,7 +99,7 @@ const photos = (await getCollection('photos')).slice(0, 4);
       note: t('heatmap_note', 'en'),
     }}
   />
-  <ProjectWall />
+  <ProjectWall locale="en" />
 </BaseLayout>
 
 <style>
diff --git a/src/pages/en/opensource.astro b/src/pages/en/opensource.astro
index 0d8685f..e94a40e 100644
--- a/src/pages/en/opensource.astro
+++ b/src/pages/en/opensource.astro
@@ -11,7 +11,7 @@ import { t } from '../../i18n/ui';
     title: t('heatmap_title', 'en'), summary: t('heatmap_summary', 'en'),
     less: t('heatmap_less', 'en'), more: t('heatmap_more', 'en'), note: t('heatmap_note', 'en'),
   }} />
-  <ProjectWall limit={99} />
+  <ProjectWall limit={99} locale="en" />
 </BaseLayout>
 
 <style>
diff --git a/src/styles/global.css b/src/styles/global.css
index fb0cc1d..129a9c3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -71,6 +71,7 @@ a { color: inherit; text-decoration: none; }
   line-height: var(--leading-tech);
   color: var(--ink-2);
   max-width: var(--measure);
+  overflow-wrap: break-word; /* 移动端审计 M1：裸长 URL 曾撑破 88px（只给了书评轨） */
 }
 .prose-tech p + p { margin-top: 0.9em; }
 .prose-tech h2 { font-size: var(--text-h2); margin-top: 1.8em; line-height: var(--leading-heading); text-wrap: balance; }