Fix header full-bleed edge gap and readings-column overflow on mobile - #171
Merged
Conversation
The day/date header banner used width:100vw with a calculated negative margin to break out of its centered parent to the true viewport edges. That math depends on vw exactly matching the real rendering width, which isn't reliable on some mobile browsers -- confirmed via a real device screenshot showing the banner falling short of the left edge. Replaced it with a ::before pseudo-element spread far past its own bounds (clipped by body's existing overflow-x:hidden), which doesn't need vw precision to reach the true edges. Also fixes section.readings (a grid item in .readings-columns) rendering wider than its own grid track on narrow screens -- confirmed via devtools showing the column at 270px but the section at 294px. Same root cause as the site title fix from yesterday: an unshrinkable child (looks like the translation <select>) was setting an implicit min-width on the grid item past its track width. Adding min-width:0 lets the grid track's width win, and max-width:100% on the select gives it something to actually shrink against. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
…on mobile This was meant to fix a minor desktop-only centering offset (content sitting ~15px left of true center on pages with a real scrollbar), but it turned out to reserve its stable gutter width on both edges even on Android Chrome, which normally uses overlay scrollbars that reserve no layout space at all. Confirmed via devtools on the reporter's device: page width 1358px, <html> width 1328px -- exactly two scrollbar-widths of dead space that no visible scrollbar ever occupied. That inset was also why the header's full-bleed background still fell short of the true edge after the previous fix: it's clipped by body's overflow-x: hidden, which itself was bounded by the shrunken html. Dropping back to plain overflow-y:auto and accepting the minor desktop offset -- it's real-scrollbar-only and much less costly than an always-on inset that was never fixing anything on mobile in the first place. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
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.
Summary
width: 100vwplus a calculated negative margin to break out of its centered parent -- math that depends onvwexactly matching the real rendering width, which isn't reliable on some mobile browsers. Confirmed via a real-device screenshot. Replaced with a::beforepseudo-element spread far past its own bounds (clipped bybody's existingoverflow-x: hidden), which doesn't need that precision.section.readings(a grid item in.readings-columns) rendering wider than its own grid track on narrow screens, pushing the passage text visibly right of center. Confirmed via devtools: column at 270px, section at 294px. Same root cause as the site-title fix from the prior PR -- an unshrinkable child (likely the translation<select>) was setting an implicitmin-widthon the grid item past its track width.min-width: 0lets the track win;max-width: 100%on the<select>gives it something to shrink against.Test plan
docker compose run --rm tests— 142 tests pass🤖 Generated with Claude Code
https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3