Skip to content

feat(ui): large-screen layout - adaptive nav, content max-width, unlock rotation - #47

Merged
SiteRelEnby merged 3 commits into
mainfrom
feat/large-screen-adaptive-nav
Jul 27, 2026
Merged

feat(ui): large-screen layout - adaptive nav, content max-width, unlock rotation#47
SiteRelEnby merged 3 commits into
mainfrom
feat/large-screen-adaptive-nav

Conversation

@SiteRelEnby

@SiteRelEnby SiteRelEnby commented Jul 26, 2026

Copy link
Copy Markdown
Collaborator

Large-screen / tablet support at the app-root chrome level (part of #65). Two related changes, both in SheafApp.

1. Adaptive top-level navigation

Swaps the fixed bottom NavigationBar for Material3's NavigationSuiteScaffold, which adapts the top-level chrome to the window width:

  • Compact width (phones): bottom navigation bar, exactly as today.
  • Medium/expanded width (tablets, landscape, foldables, large/free-form windows): a navigation rail down the side.
  • Non-top-level screens (detail/editor/full-screen): no nav chrome (NavigationSuiteType.None), same as before.

Breakpoint is the standard 600dp compact/medium split, read from the window width so it reacts live to resize / multi-window. Destinations, selection state, and back-stack-preserving navigation are unchanged; only the container drawing them changed.

New dependency: androidx.compose.material3:material3-adaptive-navigation-suite, pinned to the material3 version (1.5.0-alpha17).

2. Content max-width on wide windows

Wraps the NavHost content so a single pane doesn't stretch across a whole tablet: capped at 840dp and centred, with gutters beyond that. widthIn is a no-op below the cap, so phones and split-screen are untouched. The relationship graph opts out (FULL_BLEED_ROUTES) because the pan/zoom canvas wants the whole area.

3. Drop the portrait orientation lock

MainActivity was locked to portrait, so on a landscape tablet or foldable the system pillar-boxed the whole window - black bars either side of the app, including the rail. Removing the lock lets the app fill the window and rotate; the adaptive nav + content cap above handle the resulting widths. Android 16 forces this on large screens once we bump targetSdk, so it's on the path anyway.

Follow-ups (not here)

  • Two-pane list/detail on expanded width (members, history) via ListDetailPaneScaffold, and/or a multi-column card grid on Home - the real way to use the extra landscape width rather than leaving gutters.

Testing

:app:assemblePlayRelease :app:testPlayReleaseUnitTest green. Device checklist:

  • Phone: bottom bar unchanged; all five tabs and detail screens navigate as before
  • Tablet / large window: top-level tabs show as a side rail; content is centred rather than edge-to-edge
  • Relationship graph still uses the full width on a tablet
  • Resize / unfold across the 600dp line swaps bar <-> rail without losing the current tab
  • Rotate a phone / tablet to landscape: app fills the screen, no black pillar-box bars

Replaces the fixed bottom NavigationBar with Material3's
NavigationSuiteScaffold, which renders the top-level destinations as a bottom
bar on compact widths (phones) and a navigation rail on wider ones (tablets,
landscape, foldables, large/free-form windows). Non-top-level (full-screen)
destinations show no nav chrome, as before. Breakpoint is the standard 600dp
compact/medium width.

First step of large-screen support: a tablet in portrait is already wide enough
to get the rail, so the app stops looking like a stretched phone without any
per-screen changes. Content max-width and list/detail two-pane layouts are
follow-ups.
Wraps the NavHost content so a single pane doesn't stretch across a whole
tablet: content is capped at 840dp and centred, with gutters beyond that.
widthIn is a no-op below the cap, so phones and split-screen are unaffected.
The relationship graph opts out (FULL_BLEED_ROUTES) since the pan/zoom canvas
wants the whole area.

Second step of large-screen support, on top of the adaptive navigation.
@SiteRelEnby SiteRelEnby changed the title feat(ui): adaptive top-level navigation for large screens feat(ui): large-screen layout - adaptive navigation + content max-width Jul 27, 2026
MainActivity was locked to portrait, so on a landscape tablet or foldable the
system pillar-boxed the whole window - black bars either side of the app,
including the navigation rail. Dropping the orientation lock lets the app fill
the window and rotate, which the adaptive navigation and content max-width
already handle. Android 16 forces this on large screens anyway once we bump
targetSdk, so this gets us there ahead of the deadline.
@SiteRelEnby SiteRelEnby changed the title feat(ui): large-screen layout - adaptive navigation + content max-width feat(ui): large-screen layout - adaptive nav, content max-width, unlock rotation Jul 27, 2026
@SiteRelEnby
SiteRelEnby merged commit cf27541 into main Jul 27, 2026
1 check passed
@SiteRelEnby
SiteRelEnby deleted the feat/large-screen-adaptive-nav branch July 27, 2026 01:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant