Skip to content

Fix horizontal scroll and text wrapping on /lite page#769

Merged
PirateJC merged 1 commit into
masterfrom
fix-lite-page-horizontal-overflow
Jul 16, 2026
Merged

Fix horizontal scroll and text wrapping on /lite page#769
PirateJC merged 1 commit into
masterfrom
fix-lite-page-horizontal-overflow

Conversation

@PirateJC

Copy link
Copy Markdown
Collaborator

Problem

The /lite page showed a horizontal scrollbar, and the intro text block did not wrap to the viewport when the window was resized narrower than ~1200px (reported with a screenshot showing clipped/overflowing text and a bottom scrollbar).

Root cause

Three CSS issues on blocks used by the /lite page:

  1. textBlock.css.content-container > .text-block used a fixed width: 1200px (plus padding: 0 !important). Below 1200px the text box stayed 1200px wide, so the paragraph wrapped at 1200px and overflowed the viewport. Between ~1025–1199px this produced a visible horizontal scrollbar; below 1024px it was only masked by a global overflow-x: hidden.
  2. heroBlock.css — used the width: 100vw; left: 50%; margin-left/right: -50vw full-bleed hack. 100vw includes the vertical scrollbar width, so it overflowed by ~half the scrollbar on every width (a thin persistent scrollbar with classic scrollbars). This completes the earlier partial fix in 5958b72c, which set width: 100% but left the -50vw margins in place.
  3. ctaBlock.css — same 100vw / -50vw full-bleed hack as the hero block.

Fix

  • Text block: width: 100%; max-width: 1200px with 0 15px gutters — fluid below 1200px, still centered at 1200px on desktop.
  • Hero and CTA blocks: replaced the 100vw / -50vw hack with plain width: 100%. Because .content-container is already full-bleed, both still span edge-to-edge.

Verification

Built the site and measured document overflow with Playwright at 480–1400px:

  • No horizontal overflow at any width (was 20–100px at 1100–1180px in headless).
  • Headed browser with classic 15px scrollbars: scrollWidth == clientWidth, no horizontal scrollbar (was ~8px before the hero/CTA fix).
  • Confirmed visually that the intro text wraps cleanly within the viewport with even gutters, and the hero image and CTA gradient still span full width.

Changes are limited to 3 CSS files; heroBlock and ctaBlock are only used on the /lite page.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

The text block used a fixed width: 1200px and the hero and CTA blocks used a 100vw / -50vw full-bleed hack. Both overflowed the viewport (a persistent horizontal scrollbar with classic scrollbars) and stopped the intro text from wrapping below 1200px. Use width: 100% with max-width and rely on the already full-bleed content container instead.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI 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.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@PirateJC
PirateJC merged commit ada741c into master Jul 16, 2026
1 check failed
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