fix(mobile): 移动端全站横向溢出修复——Header 三档断点与长词断行
- 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
This commit is contained in:
1 parent
147f00fe1c
commit
2802278be6
6 files changed
+36
-6
No files matched your search
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user