Adaptive layouts
What it is
Section titled “What it is”Syndik8 renders the same shell navigation three different ways depending on the width of your viewport. The layout switches automatically — there is no setting to override it.
This matters because the same build runs on phones, tablets, and desktop browsers, and the tab bar at the bottom of a phone would be wasted chrome on a 27-inch monitor.
Who can use it
Section titled “Who can use it”Everyone. There is no per-role or per-user override — layout follows viewport width only.
Where to find it
Section titled “Where to find it”Adaptive layouts apply to both shells:
- Home shell — the four-tab top-level shell.
- Syndicate shell — the five-tab shell inside a syndicate.
Fields / options
Section titled “Fields / options”Syndik8 follows standard window size classes. Breakpoints are measured in device-independent pixels (dp).
| Window class | Viewport width | Layout |
|---|---|---|
| Compact | under 600 dp | Bottom NavigationBar with icon + label per tab. |
| Medium | 600 dp to 1199 dp | Left-hand NavigationRail with icon above label. |
| Expanded | 1200 dp and above | Extended NavigationRail with icon beside label. |
Typical viewports:
- Phone in portrait: compact.
- Phone in landscape, small tablet in portrait: still compact or medium, depending on device.
- iPad in landscape, a resized browser window: medium.
- Desktop browser at full width: expanded.
Behaviour rules
Section titled “Behaviour rules”- The switch is live. Resize the browser window or rotate the device and the shell switches without reloading.
- When navigation is hidden — for example, during onboarding — the rail and the bottom bar are both suppressed.
- The layout rule is global. There is no per-screen or per-user override.
- Tab content is identical across all three layouts. The shell adapts; the tabs themselves do not.
- Tap targets in each layout meet the 48×48 dp minimum regardless of window class.
- A screen with a Save button asks before losing an edit. Leaving one with unsaved changes — the back arrow, the system back gesture, or a swipe — raises an Unsaved changes prompt offering Keep editing or Discard my changes. Log Flight and Submit Expense name what you would lose instead: Discard this flight? with Discard the flight, and Discard this expense? with Discard the expense, each beside Keep editing. Leaving a screen you have not typed into does not prompt. The behaviour is the same on every such screen.
- Save is greyed out only when there is nothing to save. It enables as soon as something is genuinely different from what is stored, and greys out again while a save is in flight, so a second tap cannot submit the same change twice. A Save that stays grey after you have edited something means the screen is holding a value this version of the app does not recognise — see the note on unrecognised values.