Skip to content

fix(docs): clip horizontal hero overflow - #312

Merged
SigureMo merged 1 commit into
redai-studio:mainfrom
ShigureNyako:session/sess_dev_neko_fix_relax_docs_mobile_hero_overflow
Sep 11, 2026
Merged

fix(docs): clip horizontal hero overflow#312
SigureMo merged 1 commit into
redai-studio:mainfrom
ShigureNyako:session/sess_dev_neko_fix_relax_docs_mobile_hero_overflow

Conversation

@ShigureNyako

@ShigureNyako ShigureNyako commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

What

Add one overflow-x: clip declaration to the existing .VPHero rule in docs/.vitepress/theme/custom.css.

Why

The absolutely positioned 800×800px .hero-glow-blob in AsciiHero.vue extends beyond narrow viewports. On both homepages this widens the document and lets a horizontal touch swipe reveal a large blank area to the right.

How

Contain horizontal overflow at the hero boundary rather than hiding overflow globally on html or body. The glow itself is unchanged; vertical overflow remains visible and the hero buttons' keyboard focus outlines fit inside the hero boundary.

Testing

  • pre-commit run --all-files --show-diff-on-failure passes — Python 3.11.16; no hooks bypassed. The initial system-Python 3.14 run could not install the existing docformatter==1.3.1; rerunning the unchanged configuration under Python 3.11 passed.
  • Tests pass — GitHub CI passed Pre-commit Checks and Tests on Python 3.10, 3.11 and 3.12. The Python suite was not run locally for this CSS-only change; multi-node GPU integration hardware is unavailable.
  • New tests added — no repository dependency/test changes; a standalone Playwright validation script measured both built sites and captured screenshots.
  • Documentation updated — not applicable; no content changes.

Additional validation:

  • npm run docs:build passed for base e4875b6 and fix d4df5a4 (four OpenAPI specs generated, VitePress 1.6.4 build complete). Generated OpenAPI changes are not included in this PR.
  • Chrome 153.0.8010.36, Playwright-core 1.63.0, device scale factor 1, dark theme; both /Relax/en/ and /Relax/zh/, using local production builds.
  • Every mobile case below has document.documentElement.scrollWidth === document.documentElement.clientWidth and document.body.scrollWidth === document.body.clientWidth after the fix.
Viewport Before document/body scrollWidth After document/body scrollWidth Before → after horizontal visual-viewport offset after the same leftward touch swipe
320×568 560 / 560 320 / 320 240 → 0
360×800 580 / 580 360 / 360 220 → 0
375×667 588 / 588 375 / 375 213 → 0
390×844 595 / 595 390 / 390 205 → 0
414×896 607 / 607 414 / 414 193 → 0

The results are identical for EN and ZH. In each row, document/body clientWidth equals the requested viewport width before and after.

  • Desktop 960×900 and 1440×900, EN/ZH: no overflow before or after; exact hero/title/button geometry unchanged. Visually checked glow and focus screenshots; the 800×800px glow and blur(140px) are preserved.
  • Real Tab navigation to both hero buttons at all seven widths, EN/ZH, before/after: :focus-visible active, nonzero outlines present, and outlines remain within the horizontal clipping boundary.
  • Computed html/body horizontal overflow stays visible; hero vertical overflow stays visible. No browser page errors in the 28 captured page/viewport cases.
  • Scope: desktop Chrome with mobile emulation, not physical iOS/Safari devices.

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Refactoring (no functional changes)
  • Performance improvement
  • CI/CD or build changes

Screenshots / Logs

These are real, unedited screenshots from separate local production builds of the base and fix. Each mobile pair uses the same viewport and the same leftward touch gesture, revealing the right edge before and after. The animated/randomized ASCII backdrop naturally differs between captures. All six uploaded images were downloaded without authentication and verified byte-for-byte against the originals (SHA-256).

English mobile screenshots

375×667 viewport, identical leftward touch gesture:

Before: 213px blank area exposed After: stays at the normal page boundary
English before: horizontal swipe reveals blank area English after: horizontal swipe stays at the page boundary

Chinese mobile screenshots

375×667 viewport, identical leftward touch gesture:

Before: 213px blank area exposed After: stays at the normal page boundary
Chinese before: horizontal swipe reveals blank area Chinese after: horizontal swipe stays at the page boundary

Desktop glow and keyboard focus

1440×900 viewport, primary button reached with Tab:

Before After
Desktop before: hero glow and primary button focus outline Desktop after: hero glow and primary button focus outline preserved

# 🐛 Bug Fix

- Clip horizontal overflow at the existing VPHero boundary so the 800px
  ambient glow cannot widen mobile homepages, without hiding page overflow.
- Preserve vertical glow and button focus outlines.

Validation: docs build; all pre-commit hooks (Python 3.11); Chromium EN/ZH
homepages at 320, 360, 375, 390, 414, 960 and 1440px, including touch swipes
and keyboard focus. Before/after screenshots captured from local builds.

@rai-studio-bot rai-studio-bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已审查完整 diff 及中英文首页的 Hero 结构,未发现需要阻塞合入的问题。改动范围明确,PR 已提供移动端横向滑动、桌面布局及键盘焦点的验证记录,并说明了浏览器覆盖范围。

Pre-commit 已通过,Python CI 仍在运行。本次为静态审查,未独立重跑文档构建或浏览器验证;多节点 GPU 集成测试因环境缺少对应硬件未运行。

Powered by Nyanpasu with gpt-6-astra medium, please check the suggestions carefully.

@ShigureNyako
ShigureNyako marked this pull request as ready for review September 11, 2026 14:40

@SigureMo SigureMo left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMeow 🐾

@SigureMo
SigureMo merged commit 8c4b31d into redai-studio:main Sep 11, 2026
4 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.

3 participants