fix(snd): mobile UX — how-it-works close button + notFound alignment#27
Merged
Conversation
The X was absolutely-positioned with negative top/right offsets and muted color, which on small viewports could land outside the visible modal-card or get visually lost. Move it into a flex header row next to the title as a proper 44x44 SVG button with text-color contrast and a visible 1px border on hover/focus.
.snd-complete was using gap: 20px without display: flex, so children fell back to default block alignment and inherited a mix of text-center / no-align rules, which on mobile produced the visible misalignment between the hero (left), tag (left), title (centered), caption (left and wrapping awkwardly across "from server"), and button (left). - Make .snd-complete a centered flex column with text-align: center, zero-out child margins so the gap is consistent, and add small-viewport overrides (gap, padding, heading size). - Drop the redundant text-center / paragraph-wrapped-button markup in notFound.js. - Replace the hand-typed "> share no longer..." caption with a translated string and remove the leading > glyph that was forcing a bad wrap on narrow screens. - Broaden the copy (expiredTitle/expiredTag/expiredCaption) so the same page reads honestly both for expired share links and for literal mistyped URLs (the SPA's catch-all route).
jaschadub
changed the title
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
Two related mobile-UX fixes for screens that landed in the same release window:
1. How-it-works modal close button
The X was absolutely positioned with negative
top/rightoffsets and a muted color — on small viewports it could end up outside the visible modal-card or get visually lost. Moved into a flex header row alongside the title as a proper 44×44 SVG button with--snd-textcontrast and a 1px border that highlights on hover /:focus-visible.2. notFound / 404 page alignment
.snd-completehadgap: 20pxwithoutdisplay: flex, so children fell back to default block alignment and inherited a mix oftext-center/ no-align rules. Visible on mobile as misalignment between the hero (left), tag (left), title (centered), caption (left, wrapping awkwardly across "from server"), and button (left)..snd-completea centered flex column withtext-align: center, zero-out child margins, add small-viewport overrides.text-center/ paragraph-wrapped-button markup innotFound.js.> share no longer...caption with a translated string and remove the leading>glyph that forced a bad wrap on narrow screens.expiredTitle/ newexpiredTag,expiredCaption) so the same page reads honestly for both expired share links and literal mistyped URLs.Test plan
/404on mobile → hero, tag, title, caption, body, and button are all centered on the same axis.