Release v1.27.1 — iPad layout fixes#402
Merged
Merged
Conversation
A 256 px expanded sidebar next to a 768 px viewport leaves the content a 512 px column — an iPad held upright rendered every page squeezed. With no stored preference, md–lg widths now start collapsed to the icon rail; a manual toggle persists and wins on every later visit.
…idth Without min-w-0 the shell's flex column adopted the measurements table's intrinsic min width, widening main past the viewport and putting the whole page on a horizontal scrollbar at tablet widths. Wide children scroll inside their own overflow-x-auto containers.
Reading matchMedia (or localStorage) inside the initial render branches the hydration render away from the SSR markup — the sidebar is only CSS-hidden below md and still hydrates its DOM there, so the phone viewport tripped React #418 in the dashboard console guard. The collapsed state now gates on the mounted probe like the module filter above it: SSR and hydration paint the expanded shell, the stored pref or tablet default applies right after. useIsMobile learns the lg cut for the tablet probe.
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
Fixes the squeezed layout on tablet-width screens reported from an iPad. A viewport sweep across 43 routes at three iPad widths (768/834 portrait, 1024 landscape) found two root causes; both are fixed and now guarded by an e2e spec.
What lands
min-w-0on the shell's content column. The measurements table's intrinsic min width widened<main>past the viewport and put the whole page on a horizontal scrollbar at 768 px. The column can now shrink; wide children scroll inside their ownoverflow-x-autocontainers.e2e/ipad-viewport.spec.tsasserts no horizontal overflow and a ≥690 px content column at 768×1024 on three representative routes.Verification
Sweep re-run after the fixes: 0 overflows across all 43 routes × 3 viewports; main column 704 px (768 portrait), 770 px (834 portrait), 768 px (1024 landscape, unchanged).
pnpm typecheckclean ·pnpm lintclean ·TZ=UTC pnpm test(12,692 passing) ·pnpm buildclean · prettier clean.