keep mobile landscape in the compact nav layout #120
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: coracle/flotilla#120
Reference in New Issue
Block a user
Delete Branch "nayan9617/flotilla:fix/landscape-compact-nav"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
This PR fixes the landscape mobile layout issue where phone-sized devices were switching into the desktop-style side navigation layout and compressing the main content area.
Addresses #117
Problem
In landscape, some touch devices have enough width to satisfy desktop breakpoints, but not enough usable height/space for the desktop multi-column shell.
That caused a cramped UI with side rails taking too much room from the content area.
What changed
-Updated primary navigation layout behavior in PrimaryNav.svelte.
-Updated secondary navigation visibility behavior in SecondaryNav.svelte
-Added compact-landscape media rules in app.css for touch/coarse-pointer, short-height landscape screens so the app stays in compact/mobile nav mode.
Why this approach
This keeps desktop navigation for real desktop/tablet contexts while preventing accidental desktop-layout activation on phone landscape.
It targets the specific class of devices shown in the issue screenshot without changing core navigation logic.
@hodlbod could you please now check using your pixel/device and let me know the same!
This results in the attached images. I think the solution is probably going to be a lot simpler; there should be a fair amount of left padding/margin on page content at a mobile breakpoint. Although, I'm not certain because this works ok on web but not on android.
Thanks for letting me know! Let me give another try.
@hodlbod actually the root cause were:
-On Android landscape, md: breakpoints are active due viewport width.
-That makes fixed page utility classes (cw, cw-full, cb, and md:mb-0 on Page) behave like desktop.
and that's what leads to content gets shifted/shrunk with large left offset and bottom overlap, exactly like your images.
This does basically work, but it feels ad hoc to me. I wouldn't mind keeping the nav visible, but I can't get the page content sized correctly by fiddling with breakpoints. In the browser the breakpoints work as I would expect, but not on android which is confusing.
Would you mind opening another PR that attempts this fix but keeping the secondary nav visible?
Thanks, that makes sense. I agree the breakpoint approach feels too ad hoc here.
Sure, I’ll open a separate PR that keeps the secondary nav visible and focuses on fixing the page/content sizing itself on Android, rather than hiding nav with breakpoint overrides.
Pull request closed