2/6 Mobile: viewport meta tags + normalized compensating CSS - #618
Open
mcfrank wants to merge 1 commit into
Open
2/6 Mobile: viewport meta tags + normalized compensating CSS#618mcfrank wants to merge 1 commit into
mcfrank wants to merge 1 commit into
Conversation
…for them The participant-facing base templates (cdi_base, administration_base, registration base, home) had no viewport meta tag, so phones rendered pages in the ~980px fallback viewport scaled down. The small-screen CSS compensated with huge sizes (40px body text, 46px icons, 60px datepicker cells); with a real viewport those compensations over-fire, so this change is necessarily coupled: viewport tags added, font scale normalized to 16px/18px, form-control and modal/datepicker compensations removed, checkboxes/radios enlarged to comfortable tap targets, and a small phone gutter added for pages without a Bootstrap container. Both copies of each stylesheet (app source and the tracked STATIC_ROOT copy) are updated in sync. Verified with phone- and desktop-size screenshots of the home page, background-info form, and vocabulary checklist; also fixes desktop artifacts (truncated item labels, overflowing sidebar buttons). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 9, 2026
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.
Part of the six-PR stack (merge after #617).
The participant-facing base templates had no viewport meta tag, so phones rendered the ~980px fallback viewport scaled down — and the small-screen CSS compensated with 40px body text, 46px icons, and 60px datepicker cells. This change is necessarily coupled: viewport tags added to all four bases, font scale normalized (16px phone / 18px desktop), compensations removed, checkboxes enlarged to real tap targets, phone gutters added.
Verified by phone- and desktop-size screenshots of home, background-info, and the vocabulary checklist; also fixes desktop artifacts (truncated labels, overflowing sidebar buttons). Note both copies of each stylesheet change in sync (app source + the tracked STATIC_ROOT copy — see the tech-debt catalogue re: un-tracking collected static).
🤖 Generated with Claude Code