From 6349cd339bd25c12e5a4497057588c9b6ed6a828 Mon Sep 17 00:00:00 2001 From: Anne Jan Brouwer Date: Fri, 14 Aug 2026 22:39:37 +0200 Subject: [PATCH] fix(style): stop pages scrolling sideways on narrow screens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_0142DuVFXpWnjeQhZzT3N3nC --- assets/scss/_variables_project.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 16a99ba..7a27568 100755 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -4,6 +4,25 @@ Add styles or override variables from the theme here. */ +/* A long URL used as link text, or a code-like heading, is one unbreakable + word. Without this the whole page scrolls sideways on a phone. */ +.td-content { + overflow-wrap: break-word; +} + +/* The logo declares its size in millimetres, about 302px, which is wider than + the smallest phones once the navbar padding counts. The calc only bites + below ~340px, so the logo keeps its size everywhere else. */ +.navbar-brand svg { + max-width: calc(100vw - 2.5rem); +} + +/* Swagger UI lays itself out wider than the content column on small screens. + Give the widget its own scroll area rather than scrolling the page. */ +#docsy_swagger_ui { + overflow-x: auto; +} + .navbar-brand .font-weight-bold { display: none; }