Responsive hardening for new features (mobile overflow + 375px e2e)#44
Open
astrapi69 wants to merge 1 commit into
Open
Responsive hardening for new features (mobile overflow + 375px e2e)#44astrapi69 wants to merge 1 commit into
astrapi69 wants to merge 1 commit into
Conversation
…2e (#43) No deliberate responsive pass had been done for this cycle's features. Most are responsive by default (viewport-relative widths, flex-wrap, auto-fill grids, safe-area); two overflow risks remained: - QrCodeModal: the 240px QR image is now width:100% / max-width:240px / aspect-ratio 1 (fits screens narrower than 240px+padding). - PWA UpdatePrompt/InstallPrompt banner: the message+buttons row now flex-wraps so it never overflows on narrow screens. Adds e2e/smoke/responsive-mobile.spec.ts: at a 375px viewport, asserts the command palette, About + QR modal, and Appearance/Data tabs produce no horizontal overflow (scrollWidth <= viewport). Run via the e2e webServer. Affected unit tests green; theme-token guard, eslint, build OK. Closes #43
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
2 participants
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.
Closes #43
Honest follow-up to "did we do the responsive aspect?" - no deliberate pass had been done. The new components were responsive by default (viewport-relative widths,
flex-wrap,auto-fillgrids,safe-area-inset), but an audit found two overflow risks and zero mobile-viewport tests.Fixes:
240px; nowwidth:100%/max-width:240px/aspect-ratio:1so it fits screens narrower than ~240px+padding.flex-wraps (+justify-content:flex-end) so it never overflows on narrow screens.Test:
e2e/smoke/responsive-mobile.spec.ts- at 375px asserts no horizontal overflow (scrollWidth <= viewport) on the command palette, About tab + QR modal, and Appearance/Data tabs.Affected unit tests green; theme-token guard / eslint / build OK. The e2e runs against the auto-started stack (
cd e2e && npx playwright test --project=smoke).Still not covered (honest): a real manual device check (AL's Visueller Device-Check) - that's a human-on-device step.