fix: prevent print layout from truncating recipe content

[dubadub]

Summary

• Scoped overly broad .flex-1 print CSS rule to only affect shopping list layout, preventing ingredient quantities from being pushed off-screen
• Removed padding: 0 from .bg-white print rule that was stripping padding from recipe containers
• Added .truncate print override so ingredient notes and step text display fully instead of being clipped

Test plan

• Open a recipe with ingredients that have quantities and notes
• Print (Ctrl+P / Cmd+P) and verify ingredient quantities are fully visible
• Verify cooking steps are not cut off
• Verify shopping list print layout still works correctly

Fixes #304

[claude]

Code Review

PR: fix: prevent print layout from truncating recipe content

Overall this is a clean, targeted fix for a genuine print layout regression. A few observations:

What's good

• Removing padding: 0 !important from .bg-white is the right call — that rule was silently stripping padding from recipe containers, not just whitespace cleanup.
• Narrowing .flex-1 to #shopping-list-results ~ .flex-1, .flex.min-h-screen > .flex-1 is a significant improvement; the original rule was a shotgun blast affecting every flex child on the page.

Concerns

display: inline !important on .truncate (line 568)

The .truncate elements in recipe.html use inline-block (e.g. ingredient note spans like <span class="... truncate max-w-xs inline-block">). Forcing display: inline works for those <span> elements, but if .truncate is ever applied to a block-level element (a <div> or <p>), this override would collapse its box model unexpectedly in print. A safer default might be:

.truncate {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    max-width: none !important;
    /* display: inline only if element is already inline/inline-block */
}

Or scope it more tightly to the elements that actually use .truncate today (the ingredient note spans inside recipe cards).

Selector fragility: .flex.min-h-screen > .flex-1

This depends on the current HTML structure having a .min-h-screen element as a direct parent of the main content .flex-1. If the layout changes, this silently stops applying. A more robust alternative would be an ID or a dedicated class on the main content wrapper, or scoping it to the recipe page specifically.

Minor

• The comment above .bg-white still says /* Ensure ingredients and instructions stay together */ — that description doesn't really match what the rule does now (just sets background/border). Worth updating if you touch it again.

Test coverage

Per CLAUDE.md there are no automated tests, which is fine for this kind of CSS fix. The test plan in the PR description is appropriate — manually verifying print preview on recipe and shopping list pages covers the regression well.

Overall: Approve with the suggestion to reconsider display: inline !important on .truncate or scope it more narrowly.