Responsive app shell, routes and navigation #38

Merged

approver_agent merged 2 commits from task/app-shell-routes_42a4695a-6bd0-49a1-925e-387858dbee48 into feature/64e5bb19-c9a2-4c6a-8f0c-aceae43fb732-frontend-foundation

2026-10-03 18:40:35 -04:00

Author	SHA1	Message	Date
dev_agentandClaude Opus 5.5	f922b4457e	Keep shell sidebar at 208 px including its padding CI / ci (pull_request) Successful in 1m31s Details Independent review Codex gpt-6-sol high: APPROVED (0 findings) Details CI / ci (push) Successful in 1m32s Details The desktop sidebar declared width: 208px with 16px side padding under content-box sizing, so it rendered 240 px wide. Give it box-sizing: border-box so the handoff's 28px 16px padding sits inside the 208 px. The tablet rail (96 px wide, 24px 0 padding) and the mobile bottom bar (62 px tall, 0 6px padding) had no padding on their sized axis, so they were correct, but they also get border-box so later padding cannot inflate them. The "M" mark (48 px) and rail pills (56x36) have no padding or border. jsdom does no layout (getBoundingClientRect returns zeros), so the test cannot read used widths from it. A new outerSize() helper in src/test/cssRules.ts computes the border-box size from the declared rules: width or height, plus padding and border unless box-sizing is border-box. The shell test asserts it for the sidebar (208), rail (96), bar height (62), mark (48x48) and rail pills (56x36). With border-box removed from the sidebar the test fails with "expected 240 to be 208". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-10-03 18:36:21 -04:00
dev_agentandClaude Opus 5.5	93e209c302	Add responsive app shell, routes and navigation CI / ci (push) Successful in 1m32s Details CI / ci (pull_request) Successful in 1m31s Details Replace the catch-all placeholder with an AppShell that renders one primary nav per breakpoint (chosen with matchMedia via useBreakpoint): a dark pill bottom bar below 768 px, a 96 px rail with the "M" mark at 768-1199 px, and a 208 px sidebar with the MealQuest wordmark and the "Our kitchen / Shared household" card at 1200 px and up. Nav order is Home, Plan, Discover, Quick, Settings; NavLink marks the active item aria-current="page", with nested Plan and Settings paths keeping their parent current. The mobile scroll area reserves 100 px plus the safe area beneath its content. Register every handoff route plus /settings/household, /settings/regulars and /settings/calendar, each with a placeholder heading. Remove the default body margin so the shell fills the viewport. Tests force each breakpoint with a matchMedia mock and assert the routes, nav order, each layout's structure, aria-current and the mobile bottom padding from the stylesheet. Maestro task: 42a4695a-6bd0-49a1-925e-387858dbee48 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-10-03 18:33:09 -04:00

Author

SHA1

Message

Date

dev_agentandClaude Opus 5.5

f922b4457e

Keep shell sidebar at 208 px including its padding

CI / ci (pull_request) Successful in 1m31s

Details

Independent review Codex gpt-6-sol high: APPROVED (0 findings)

Details

CI / ci (push) Successful in 1m32s

Details

The desktop sidebar declared width: 208px with 16px side padding under
content-box sizing, so it rendered 240 px wide. Give it box-sizing:
border-box so the handoff's 28px 16px padding sits inside the 208 px.

The tablet rail (96 px wide, 24px 0 padding) and the mobile bottom bar
(62 px tall, 0 6px padding) had no padding on their sized axis, so they
were correct, but they also get border-box so later padding cannot
inflate them. The "M" mark (48 px) and rail pills (56x36) have no
padding or border.

jsdom does no layout (getBoundingClientRect returns zeros), so the
test cannot read used widths from it. A new outerSize() helper in
src/test/cssRules.ts computes the border-box size from the declared
rules: width or height, plus padding and border unless box-sizing is
border-box. The shell test asserts it for the sidebar (208), rail (96),
bar height (62), mark (48x48) and rail pills (56x36). With border-box
removed from the sidebar the test fails with "expected 240 to be 208".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-03 18:36:21 -04:00

dev_agentandClaude Opus 5.5

93e209c302

Add responsive app shell, routes and navigation

CI / ci (push) Successful in 1m32s

Details

CI / ci (pull_request) Successful in 1m31s

Details

Replace the catch-all placeholder with an AppShell that renders one
primary nav per breakpoint (chosen with matchMedia via useBreakpoint):
a dark pill bottom bar below 768 px, a 96 px rail with the "M" mark at
768-1199 px, and a 208 px sidebar with the MealQuest wordmark and the
"Our kitchen / Shared household" card at 1200 px and up. Nav order is
Home, Plan, Discover, Quick, Settings; NavLink marks the active item
aria-current="page", with nested Plan and Settings paths keeping their
parent current. The mobile scroll area reserves 100 px plus the safe
area beneath its content.

Register every handoff route plus /settings/household,
/settings/regulars and /settings/calendar, each with a placeholder
heading. Remove the default body margin so the shell fills the viewport.

Tests force each breakpoint with a matchMedia mock and assert the
routes, nav order, each layout's structure, aria-current and the
mobile bottom padding from the stylesheet.

Maestro task: 42a4695a-6bd0-49a1-925e-387858dbee48

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-03 18:33:09 -04:00