Repository navigation
Mobile Tablet Layouts
The mobile app is responsive: instead of stretching the phone layout, it adapts at Material 3 width breakpoints. Everything below applies to tablets, foldables, and phones rotated to landscape.
| Width | Class | What changes |
|---|---|---|
| < 600dp | Compact | Bottom navigation bar, single-column screens — the phone layout |
| 600–839dp | Medium | Bottom bar becomes a NavigationRail down the left edge, every tab labeled |
| ≥ 840dp | Expanded | Rail stays, and list screens go two-pane (list on the left, detail beside it) |
A Pixel Tablet in landscape (1280×800dp) is fully expanded; the same device in portrait is medium — rail, single pane.
Past 600dp the bottom bar becomes a left-edge rail with every destination labeled:
Wide screens also cap content width (~840dp) so forms and chat don't sprawl edge to edge.
At expanded widths, tapping a list row opens its detail beside the list instead of covering the screen — the list pane stays ~360dp on the left. This applies to grocery lists, recipes, meal plans, events, pantry items, and wine bottles:
Before anything is selected, the right pane shows a gentle placeholder:
The detail pane has its own navigation: dialogs and sub-screens inside it pop within the pane, never pop the whole tab away. Deep links and push notifications still open the target detail directly, and on a compact phone nothing changes — taps push full-screen detail screens as before.
The More tab keeps its tile layout on tablets:
Opening a meal plan in the right pane shows the week grid — seven day columns by three meal rows:
The grid sizes its day columns to the pane it's in: on a real tablet detail pane (~920dp next to the 360dp list) all seven days fit at once — columns shrink toward a 110dp floor, and below that the grid scrolls horizontally rather than squashing. On panes under ~700dp the plan falls back to scrolling day sections instead of the grid.
The week view's sheets open over the pane:
Cook mode uses the extra width for a persistent ingredients rail beside the step pager:
The tablet shots on this page were captured on a Pixel Tablet emulator (2560×1600 @ 320dpi → 1280×800 logical). Portrait on the same hardware is medium width — rail without the second pane.
← Back to Using the Mobile App