fix: improve cooking mode responsiveness on smartphones

[dubadub]

Fixes #305

Summary

• Add overflow-x: hidden to cooking mode cards to prevent horizontal scrollbar from badge overflow
• Reduce card margins (calc(100% - 24px) vs 40px) and padding on mobile for more content space
• Scale down badge font sizes (22px → 16px) and allow text wrapping (white-space: normal) on mobile
• Shrink header elements: title, section pills, close button for small screens
• Reduce font sizes for step text (20px → 18px), mise-en-place items, and done card on mobile

Test plan

• Open a recipe page on a smartphone (or Chrome DevTools mobile emulation)
• Click the "Cook" button to enter cooking mode
• Verify the overlay fills the screen properly with no horizontal overflow
• Swipe through steps and verify badges wrap correctly
• Check section header card with ingredients list fits on screen
• Verify the header (title, section pills, close button) fits without overflow
• Test on both small (375px) and larger (428px) phone widths

[claude]

Code Review

Good targeted fix for the mobile cooking mode overflow issues. The changes are clean, well-scoped, and address a real usability problem. Here is my feedback:

What is working well

• Adding overflow-x: hidden to the base .cooking-card (not just the mobile query) is the right call — it addresses the root cause at all widths rather than just masking it on mobile.
• flex-shrink: 1; min-width: 0 on .cooking-header-sections is the canonical flexbox fix for text overflow in flex children — good pattern.
• Targeting badges specifically via .cooking-step-text .ingredient-badge etc. with white-space: normal is appropriately scoped rather than overriding the badge class globally.
• The card width change from calc(100% - 40px) (base) to calc(100% - 24px) on mobile is a sensible trade-off — more horizontal space where it is most constrained.

Issues and suggestions

1. Long ingredient names can still overflow at the character level

white-space: normal allows wrapping at word boundaries, but a very long single-word ingredient (or one with no spaces) will still overflow. Consider adding:

.cooking-step-text .ingredient-badge,
.cooking-step-text .cookware-badge,
.cooking-step-text .timer-badge {
    font-size: 16px;
    padding: 1px 8px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

2. overflow-x: hidden applies to all screen sizes

The fix is in the base style block, not inside the @media (max-width: 640px) block. This is probably fine since the card has a constrained max-width on desktop and badge overflow should not occur there. But it is worth noting it is a global change — if there is ever a legitimate need for horizontal scrolling inside a card on desktop this would silently suppress it.

3. No intermediate breakpoint coverage

The gap between 640px and 1024px (tablet range / landscape phones) may still have some awkward sizing. Out of scope for this fix but worth a follow-up issue.

4. Missing regression test

The project has Playwright test infrastructure including mobile viewport tests (npm run test:mobile). Adding a cooking mode smoke test to tests/e2e/ that checks the overlay renders without horizontal overflow at 375px width would prevent future regression. Not a blocker, but worth adding after merge.

Verdict

The fix is solid and the approach is correct. The main actionable item before merging is adding overflow-wrap: break-word on the badge rules to handle long ingredient names without spaces. Everything else is minor or follow-up work.

[claude]

Code Review

PR: fix: improve cooking mode responsiveness on smartphones

This is a solid set of responsive fixes. The changes are well-scoped to cooking-mode.css and address the real issues on small screens.

What's good

• overflow-x: hidden on .cooking-card is the right place to prevent badge overflow — adding it alongside the existing overflow-y: auto is minimal and non-disruptive.
• width: calc(100% - 24px) for mobile cards is cleaner than the previous padding: 24px 20px approach (which didn't actually constrain width).
• Moving .cooking-header-title font-size into the consolidated @media (max-width: 640px) block removes the previously duplicated rule — good cleanup.
• white-space: normal on badges is the correct fix for text wrapping on narrow screens.

Concerns

font-size: 13px for .cooking-step-ingredients at mobile

13px is below the generally recommended minimum legible size (16px body, 14px secondary). On a real device this may be hard to read during active cooking. Consider 14px as a floor.

No landscape orientation handling

.cooking-card has max-height: 70vh (or 75vh on mobile). On a phone in landscape mode, 75vh can be very short (maybe 150–200px), making cards nearly unusable. A quick guard like:

@media (max-width: 640px) and (orientation: landscape) {
    .cooking-card {
        max-height: 85vh;
    }
}

would help, though this could be a follow-up issue rather than blocking this PR.

overflow-x: hidden on scroll container

Adding overflow-x: hidden to an element that also has overflow-y: auto is valid, but on some browsers it implicitly creates a new stacking context. This is unlikely to cause issues here, but worth keeping in mind if z-index problems appear later in the overlay.

Test coverage

The test plan in the PR description is manual (Chrome DevTools emulation + real device). Given the project has no automated E2E tests for this flow, that's appropriate. The plan covers both viewport widths mentioned (375px and 428px).

Overall: Approve. The font-size: 13px is a mild concern worth addressing, and landscape orientation is worth a follow-up issue, but neither should block this fix.