fix(meal-plan) align sticky header and week nav, keep nav flush after rotation #43

Merged

araemer merged 1 commit from meal-plan-sticky-nav-fixes into stage

2026-09-26 08:51:32 +00:00

araemer commented

2026-09-26 08:02:21 +00:00

Owner

Closes #27
Closes #24

Both bugs live in the meal plan's two stacked sticky bars (page header + week nav row) and touch the same lines of MealPlanCalendar.tsx, so they ship together.

#27 — header looks like a floating box when scrolling

Cause: the week nav row was full-bleed (-mx-8 px-8) while the sticky page header only spans the content width. The bars didn't line up, and the shadows of day cards scrolling underneath peeked out in the 2rem gutters beside the header — that's the boxed look in the issue screenshot.

Fix: the nav row now spans the content width, like the header (agreed option: nav adapts, header width unchanged on all pages). To keep the gutters clean, both bars get the new STICKY_BAR_GUTTER_MASK_CLASS from src/config/layout.ts: two horizontally offset box shadows in the page background colour that paint only over the gutters. It changes neither width nor border line and is invisible when nothing scrolls beneath. Since it lives in StickyHeader, it applies to every page's sticky header — checked on the recipe list: no visible change there.

#24 — gap between header and nav after rotating the phone

Cause: the nav's sticky top offset was measured from the header once on mount. Rotating reflows the header (portrait: buttons below the title, 126px; landscape: beside it, 90px), so the stale offset left a gap through which scrolled content showed.

Fix: a ResizeObserver (border-box) on the header keeps the offset in sync with every header height change — rotation, resize, a wrapping title.

Verification

npm run build ✓, npm run lint (0 errors; 2 pre-existing warnings elsewhere), npm run test ✓
/verify-ui as user with a throwaway plan, scrolled list view on all five viewports: header and nav share the same left/right edges and sit flush (gap 0) at 400×890, 890×400, 800×1280, 1280×800, 1920×1080; gutters beside the bars clean (no card shadows); rotation portrait → landscape → portrait updates the nav offset 126 → 90 → 126px; no console errors.

Notes

#41 also edits MealPlanCalendar.tsx (its imports and the dish link), so whichever of #41/#43 merges second may need a small conflict resolution in the import block. No overlap with #42.

🤖 Generated with Claude Code

Closes #27 Closes #24 Both bugs live in the meal plan's two stacked sticky bars (page header + week nav row) and touch the same lines of `MealPlanCalendar.tsx`, so they ship together. ## #27 — header looks like a floating box when scrolling **Cause:** the week nav row was full-bleed (`-mx-8 px-8`) while the sticky page header only spans the content width. The bars didn't line up, and the shadows of day cards scrolling underneath peeked out in the 2rem gutters beside the header — that's the boxed look in the issue screenshot. **Fix:** the nav row now spans the content width, like the header (agreed option: nav adapts, header width unchanged on all pages). To keep the gutters clean, both bars get the new `STICKY_BAR_GUTTER_MASK_CLASS` from `src/config/layout.ts`: two horizontally offset box shadows in the page background colour that paint only over the gutters. It changes neither width nor border line and is invisible when nothing scrolls beneath. Since it lives in `StickyHeader`, it applies to every page's sticky header — checked on the recipe list: no visible change there. ## #24 — gap between header and nav after rotating the phone **Cause:** the nav's sticky `top` offset was measured from the header once on mount. Rotating reflows the header (portrait: buttons below the title, 126px; landscape: beside it, 90px), so the stale offset left a gap through which scrolled content showed. **Fix:** a `ResizeObserver` (border-box) on the header keeps the offset in sync with every header height change — rotation, resize, a wrapping title. ## Verification - `npm run build` ✓, `npm run lint` (0 errors; 2 pre-existing warnings elsewhere), `npm run test` ✓ - `/verify-ui` as `user` with a throwaway plan, scrolled list view on all five viewports: header and nav share the same left/right edges and sit flush (gap 0) at 400×890, 890×400, 800×1280, 1280×800, 1920×1080; gutters beside the bars clean (no card shadows); rotation portrait → landscape → portrait updates the nav offset 126 → 90 → 126px; no console errors. ## Notes - #41 also edits `MealPlanCalendar.tsx` (its imports and the dish link), so whichever of #41/#43 merges second may need a small conflict resolution in the import block. No overlap with #42. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

araemer added 1 commit

2026-09-26 08:02:21 +00:00

fix(meal-plan) align sticky header and week nav, keep nav flush after rotation

/ test (pull_request) Successful in 1m3s

Details

4d92b47315

Two display bugs in the meal plan's sticky bars:

#27 — The week nav row was full-bleed (-mx-8 px-8) while the sticky page
header above it only spans the content width, so the stacked bars didn't
line up and the shadows of day cards scrolling underneath peeked out in the
gutters beside the header, making it look like a floating box. The nav now
spans the content width like the header, and both mask the 2rem gutters with
the new STICKY_BAR_GUTTER_MASK_CLASS (side-offset shadows in the page
background colour) — invisible when nothing is scrolled beneath, and it
changes neither width nor border.

#24 — The nav's sticky offset was measured from the header once on mount.
Rotating a phone reflows the header (action buttons move beside the title),
so the stale offset left a gap between header and nav through which scrolled
content showed. A ResizeObserver on the header now keeps the offset in sync.

Closes #27
Closes #24

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