fix(footer): stop title rules drifting when the brand heading wraps on mobile#231
Merged
Merged
Conversation
The footer column titles use fixed-width red rule-dashes as flanking ::before/::after pseudo-elements on an inline-flex heading. The brand heading "DevFest.cz 2026" is long enough that under a narrow viewport, large accessibility text, or browser zoom it wraps: the dashes stay pinned to the column edges while "2026" drops to a second line with no rules, so the decoration drifts away from the text and looks broken on mobile. - Add `white-space: nowrap` to `.col-title` so the short section labels (Sitemap / Event / Organizer) always stay on one line and their rules frame the text instead of drifting. - Drop the flanking rules on `.col-brand .col-title` and let it wrap. The site name must be free to reflow under zoom (WCAG 1.4.4 resize to 200%), which the fixed side-rules can't survive. Verified in preview: desktop unchanged; mobile 375 @100%, 320 @131% and 320 @200% all render cleanly with zero horizontal overflow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
Footer column titles frame their text with fixed-width red rule-dashes (
::before/::after) on aninline-flexheading. The brand heading "DevFest.cz 2026" is long enough that on a narrow viewport, with larger accessibility text, or under browser zoom it wraps — the dashes stay pinned to the column edges while "2026" drops to a second line with no rules, so the decoration drifts away from the text and reads as broken on mobile.Why
Reproduced at 320px + ~130% text (matches the reported mobile screenshot). The site name is long and must be free to reflow under zoom (WCAG 1.4.4 resize up to 200%), which the fixed flanking rules can't survive.
Behavior
white-space: nowrapon.col-title— the short section labels (Sitemap / Event / Organizer) stay on one line so their rules always frame the text instead of drifting..col-brand .col-titledrops the flanking rules and is allowed to wrap, so the long site name reflows cleanly with no orphaned dashes.Verified in the dev preview:
Files
src/components/Footer.scss