Skip to content

ADR-0066: Adaptive content width for wide destinations

Context

Home already bounded its dashboard to 1200 dp and centred it (ADR-0053), but that rule lived inline in HomeContent. Budgets and Reports therefore re-decided nothing and stretched every card across the full available width on landscape and tablet windows, leaving large empty regions (#162). On Reports the full-width snapshot card also pushed the donut and trend below the first viewport, so the charts were not visible without scrolling.

Decision

ui/components/AdaptiveContentColumn.kt owns the width contract. It centres a destination's single content column and caps its width at 1200 dp when the available content width is at least 600 dp, otherwise 600 dp. The breakpoint keys off the available content width — after any navigation rail or insets — never the device model or orientation, so it stays correct on tablets, desktop windows and foldables.

  • Home, Budgets and Reports apply the shared column as their outer container. Home's two-column composition and behaviour are unchanged.
  • Reports gains an intentional wide composition: at the 600 dp breakpoint the month selector and snapshot sit beside the donut and trend in a two-column Row, so the snapshot no longer pushes the charts out of the first viewport. Below the breakpoint the original single-column order is kept.
  • Financial values never ellipsize (ADR-0009, ADR-0028). The snapshot's 6-month total wraps or stacks onto its own full-width line when the two stat columns do not fit side by side; the layout is chosen from measured text widths, not a fixed column count.

Consequences

The wide bound now has one implementation and one owner; a new destination adopts it in a line rather than copying Home's inline numbers. Reports shows the snapshot and the charts together on wide windows. Compact behaviour is unchanged, and because the bound is dp geometry, font scale never moves it.

Verification

AdaptiveContentWidthTest (JVM) locks the width function at the 599/600 dp boundary. Instrumented AdaptiveLayoutTest renders Budgets and Reports in short-wide bounds (≈640×360 dp and a reduced available width) and asserts the content respects the cap, financial values are not ellipsized, and every action (add / overflow / View transactions) stays reachable; ReportsSnapshotCardTest covers the snapshot at 320/411 dp and 100/150/200% text.