fix(style): stop pages scrolling sideways on narrow screens - #253
Merged
Conversation
Refs #119. A sweep of all 177 pages at 320, 375, 414 and 768 px, measuring documentElement.scrollWidth against clientWidth in headless Chrome, found 177 pages overflowing at 320 px and five that still overflowed at 414 px. Three causes, three rules: - A long URL used as link text is one unbreakable word, and so is a heading that contains a line of code. /docs/badges/campzone-2019/ carried the page 520 px wide on a 375 px screen this way, and was still 54 px too wide at 768 px. `overflow-wrap: break-word` on .td-content lets those break. It does not touch code blocks: `pre` does not wrap, so there is nothing to break. - The brand logo declares its size in millimetres, 80mm ≈ 302 px, which with the navbar padding is wider than a 320 px screen. The max-width uses calc(100vw - 2.5rem), so it only takes effect below about 340 px and the logo is untouched everywhere else. - Swagger UI on the two Hatchery API pages lays itself out wider than the content column. It now scrolls inside its own box instead of taking the page with it. The same sweep after the change: 177 pages, four widths, zero overflowing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0142DuVFXpWnjeQhZzT3N3nC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refs #119.
The screenshot in #119 is the front page: the 80s stamp logo pushed the cover
wider than the phone. That part was fixed in
2060291and3869337. Ratherthan close the issue on that alone, I measured the whole site.
Method
Headless Chrome over CDP, every page in
sitemap.xml(177), at 320, 375, 414and 768 px, comparing
documentElement.scrollWidthwithclientWidthandlisting the elements that stick out.
Before: 177 pages overflowed at 320 px, 7 at 375 px, 4 at 414 px, 1 at
768 px. Worst case
/docs/badges/campzone-2019/, 243 px too wide on a 320 pxscreen and still 54 px too wide at 768 px.
Causes and fixes
Three rules in
assets/scss/_variables_project.scss:line of code, cannot wrap. That is what widened campzone-2019, the
Hackerhotel 2020 PuTTY page, the Hackerhotel 2024 and MCH2022
software-development pages and
/contact/.→
.td-content { overflow-wrap: break-word; }. Code blocks are unaffected:predoes not wrap, so there is nothing to break there.assets/icons/logo.svgdeclareswidth="80mm", about302 px, and the navbar margins add 20 px — wider than a 320 px screen, worth
1–2 px of scroll on every page.
→
max-width: calc(100vw - 2.5rem)on the navbar svg. That only bites belowroughly 340 px, so the logo is unchanged on every other screen (checked at
1280 px).
/docs/hatchery/api/and/docs/hatchery/api_mch2022/lays itself out wider than the content column.
→
#docsy_swagger_ui { overflow-x: auto; }, so the widget scrolls insteadof the page.
Result
The same sweep after the change: 177 pages × 4 widths, 0 overflowing.
Also checked visually at 320 and 375 px (front page, campzone-2019, the PuTTY
page) and at 1280 px for the desktop layout.
🤖 Generated with Claude Code
https://claude.ai/code/session_0142DuVFXpWnjeQhZzT3N3nC