Skip to content

fix(fuwari): 移动端首页文章列表布局与横向溢出#3982

Merged
tangly1024 merged 1 commit intomainfrom
fix/fuwari-mobile-post-list-layout
May 2, 2026
Merged

fix(fuwari): 移动端首页文章列表布局与横向溢出#3982
tangly1024 merged 1 commit intomainfrom
fix/fuwari-mobile-post-list-layout

Conversation

@tangly1024
Copy link
Copy Markdown
Owner

问题

移动端(含平板单列布局)下,Fuwari 主题首页文章列表卡片视觉上未居中,易出现一侧留白、另一侧顶出或横向溢出。

原因

  • .fuwari-meta-row 使用 white-space: nowrap,日期、分类、标签被强制单行排列,在窄屏下撑大行框最小宽度。
  • 布局链上缺少 min-w-0 / max-w-full,网格子项无法按视口正确收缩(flex/grid 默认 min-width: auto)。

修改

  • max-width: 1023px(与主题 lg 单列布局一致)下:元数据行与标签允许换行;标题链接增加 overflow-wrap / word-break,避免长字符串撑破布局。
  • #posts-wrapper、其中 articlemain、内容 sectionPostList 卡片链补充 width / min-width / max-width 约束。
  • PostList 内层网格容器增加 w-full min-w-0

验证建议

  • 手机或小窗 DevTools 打开首页,确认卡片无横向滚动条、与左右 padding 对称。
  • 抽一篇带长标题、多标签的文章检查换行与自然排版。

- Allow meta row and tags to wrap below lg breakpoint; break long titles
- Add min-w-0/max-w-full width constraints on main, section, list and cards

Co-authored-by: Cursor <cursoragent@cursor.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
notion-next-home Ready Ready Preview, Comment May 2, 2026 4:33am
notion-next-preview Ready Ready Preview, Comment May 2, 2026 4:33am

@tangly1024 tangly1024 merged commit 75c6bf1 into main May 2, 2026
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant