Collapse phone nav to four core tabs + More on small screens #65

New issue

Closed

opened 2026-08-14 12:56:45 +00:00 by nalum · 0 comments

nalum commented

2026-08-14 12:56:45 +00:00

Owner

Summary

On small screens, collapse the main navigation to four core destinations plus a "More" affordance that opens the rest. The wide-screen rail is unchanged and keeps all six. This reduces the crowding of six tabs on a phone bottom bar, which is above the 3–5 that a bottom bar comfortably holds.

Behavior

Phone bottom bar (below the existing 900px breakpoint):

Visible: Today, Calendar, Jobs, Lists.
A More entry (icon and label, never icon alone) opens a sheet with the rest: Meals, Rewards.
When the current route is one of the hidden destinations, More shows the active state, so the member is never lost.

Wide-screen rail (900px and up):

Unchanged. All six destinations stay, since the rail has the vertical room.

This reuses the existing 900px bottom-bar-versus-rail breakpoint. The two surfaces diverge only where space forces it, which is a deliberate, documented trade-off.

Scope

Web (reference surface), web/src/components/TabBar.tsx and web/src/app.css:

Render four tabs plus a More button on the narrow bar. The More button opens a Sheet (canon: modal content opens in a Sheet) listing Meals and Rewards.
The rail layout (@media (min-width: 900px)) keeps all six.

Android, android/app/src/main/java/ie/eagraiclainne/android/ui/Home.kt:

HomeBottomBar shows four NavigationBarItems plus a More item that opens a bottom sheet or menu with Meals and Rewards.
HomeNavRail keeps all six.

Both:

More reflects an active state when a hidden destination is current.
Keep 44px minimum targets and visible focus.

Relationship to the label-wrap fix

The one-line label fix (maxLines and ellipsis on both surfaces) stays. Even with four tabs, a large system font scale can still pressure a label, so single-line labels remain the floor. This issue reduces the count; that fix keeps each visible label tidy.

Design authority and canon

This changes navigation information architecture, so update docs/frontend-plan.html (rule 5) to record the responsive collapse and the four-core split. Hold the canon: recognition over recall, icon and label on every entry including More, and no destination reachable by icon alone.

Surface parity

Web is the reference. Android carries the same collapse. MCP and CLI have no navigation bar. Per system rule 1.

Definition of done

On a phone, the bar shows Today, Calendar, Jobs, Lists, and More; More opens Meals and Rewards; More is active when one of them is open.
On a wide screen, the rail still shows all six.
Labels never wrap on either surface at the largest system font scale.
docs/frontend-plan.html updated. make check passes. Verified on both surfaces, narrow and wide, at the largest font scale, against the live deploy.

### Summary On small screens, collapse the main navigation to four core destinations plus a "More" affordance that opens the rest. The wide-screen rail is unchanged and keeps all six. This reduces the crowding of six tabs on a phone bottom bar, which is above the 3–5 that a bottom bar comfortably holds. ### Behavior Phone bottom bar (below the existing 900px breakpoint): - Visible: **Today, Calendar, Jobs, Lists**. - A **More** entry (icon and label, never icon alone) opens a sheet with the rest: **Meals, Rewards**. - When the current route is one of the hidden destinations, More shows the active state, so the member is never lost. Wide-screen rail (900px and up): - Unchanged. All six destinations stay, since the rail has the vertical room. This reuses the existing 900px bottom-bar-versus-rail breakpoint. The two surfaces diverge only where space forces it, which is a deliberate, documented trade-off. ### Scope Web (reference surface), `web/src/components/TabBar.tsx` and `web/src/app.css`: - Render four tabs plus a More button on the narrow bar. The More button opens a `Sheet` (canon: modal content opens in a Sheet) listing Meals and Rewards. - The rail layout (`@media (min-width: 900px)`) keeps all six. Android, `android/app/src/main/java/ie/eagraiclainne/android/ui/Home.kt`: - `HomeBottomBar` shows four `NavigationBarItem`s plus a More item that opens a bottom sheet or menu with Meals and Rewards. - `HomeNavRail` keeps all six. Both: - More reflects an active state when a hidden destination is current. - Keep 44px minimum targets and visible focus. ### Relationship to the label-wrap fix The one-line label fix (maxLines and ellipsis on both surfaces) stays. Even with four tabs, a large system font scale can still pressure a label, so single-line labels remain the floor. This issue reduces the count; that fix keeps each visible label tidy. ### Design authority and canon This changes navigation information architecture, so update `docs/frontend-plan.html` (rule 5) to record the responsive collapse and the four-core split. Hold the canon: recognition over recall, icon and label on every entry including More, and no destination reachable by icon alone. ### Surface parity Web is the reference. Android carries the same collapse. MCP and CLI have no navigation bar. Per system rule 1. ### Definition of done - On a phone, the bar shows Today, Calendar, Jobs, Lists, and More; More opens Meals and Rewards; More is active when one of them is open. - On a wide screen, the rail still shows all six. - Labels never wrap on either surface at the largest system font scale. - `docs/frontend-plan.html` updated. `make check` passes. Verified on both surfaces, narrow and wide, at the largest font scale, against the live deploy.

nalum added the

enhancement

android

web

labels

2026-08-14 12:56:45 +00:00

nalum referenced this issue

2026-08-14 12:58:19 +00:00

fix(android): keep nav-bar labels on one line at large text scales #66

nalum referenced this issue

2026-08-14 12:59:57 +00:00

Backlog ordering (tracking) #62