fix(meal-plan) wrap dish card controls onto a second line when space runs out #42

araemer · 2026-09-26T07:50:53Z

araemer commented

2026-09-26 07:50:53 +00:00

Closes #32

What

The meal plan dish card put title, amount description and controls into a single non-wrapping row. With a long amount description (e.g. "Springform (26 cm Ø)") the title was left only a few pixels and broke one syllable per line on phones.

The row now wraps: the title keeps a 6rem minimum width, and the controls group (amount, servings stepper, move, delete) moves as one unit onto a right-aligned second line when it would otherwise squeeze the title below that. Read-only cards get the same treatment.

Trade-off

On phone portrait (~400px) even short titles like "Frikadellen" now get the two-line layout. A 4rem minimum keeps them on one line but hyphenates them mid-word ("Frikadel-len", "Pflaumenku-chen") — checked live, and two clean lines read better.

Verification

npm run build ✓, npm run lint (0 errors; 2 pre-existing warnings elsewhere)
/verify-ui with long/short title + amount combinations, as owner (user) and read-only share (pro):
- phone portrait: title on its own full-width line, controls right-aligned below
- phone landscape (list view), tablet portrait/landscape, desktop: everything stays on one line
- no overflow, no console errors

Notes

Touches the same lines of MealPlanDishCard.tsx as #41 — whichever merges second needs a small conflict resolution.

🤖 Generated with Claude Code

Closes #32 ## What The meal plan dish card put title, amount description and controls into a single non-wrapping row. With a long amount description (e.g. "Springform (26 cm Ø)") the title was left only a few pixels and broke one syllable per line on phones. The row now wraps: the title keeps a 6rem minimum width, and the controls group (amount, servings stepper, move, delete) moves as one unit onto a right-aligned second line when it would otherwise squeeze the title below that. Read-only cards get the same treatment. ## Trade-off On phone portrait (~400px) even short titles like "Frikadellen" now get the two-line layout. A 4rem minimum keeps them on one line but hyphenates them mid-word ("Frikadel-len", "Pflaumenku-chen") — checked live, and two clean lines read better. ## Verification - `npm run build` ✓, `npm run lint` (0 errors; 2 pre-existing warnings elsewhere) - `/verify-ui` with long/short title + amount combinations, as owner (`user`) and read-only share (`pro`): - phone portrait: title on its own full-width line, controls right-aligned below - phone landscape (list view), tablet portrait/landscape, desktop: everything stays on one line - no overflow, no console errors ## Notes - Touches the same lines of `MealPlanDishCard.tsx` as #41 — whichever merges second needs a small conflict resolution. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

araemer added 1 commit

2026-09-26 07:50:53 +00:00

fix(meal-plan) wrap dish card controls onto a second line when space runs out

/ test (pull_request) Successful in 58s

Details

17bbe8b081

The dish card laid out title, amount description and controls in a single
non-wrapping row. Long amount descriptions (e.g. "Springform (26 cm Ø)") left
the title only a few pixels, so it broke one syllable per line on phones.

The row now wraps: the title keeps a 6rem minimum width, and the controls
group moves as one unit onto a right-aligned second line when it would
otherwise squeeze the title below that. Applies to read-only cards as well.

Refs #32

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

araemer referenced this pull request

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

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

araemer reviewed

2026-09-26 08:41:47 +00:00

src/components/meal-plan/MealPlanDishCard.tsx Outdated

					
				@ -87,0 +86,4 @@

				                    would drop below its minimum width, the controls group wraps

				                    as a whole onto a second, right-aligned line instead of

				                    squeezing the title into a one-syllable-per-line column. */}

				                <div className="flex flex-wrap items-center justify-between gap-2 min-w-0">

i'd like to wrap earlier. The title shouldn't have more than two lines before wrapping.

araemer marked this conversation as resolved

araemer referenced this pull request from a commit

2026-09-26 08:52:55 +00:00

fix(meal-plan) move dish card controls down before the title exceeds two lines

araemer added 1 commit

2026-09-26 08:52:55 +00:00

fix(meal-plan) move dish card controls down before the title exceeds two lines

/ test (pull_request) Successful in 1m0s

Details

4fcea0806a

Addresses review feedback on #42: the title should take at most two lines
beside the controls before they wrap onto their own line.

The title's fixed 6rem flex-basis ignored its length, so long titles with
short controls (e.g. a "Stück" unit) still broke over three or four lines.
The basis now scales with the title length — half its character count in
ch, i.e. roughly the width needed for two lines — with 6rem kept as the
floor so short single words aren't hyphenated on phones.

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

araemer force-pushed meal-plan-dish-card-wrap from 4fcea0806a

/ test (pull_request) Successful in 1m0s

Details

to 862673cbcb

/ test (pull_request) Successful in 1m0s

Details

2026-09-26 08:56:38 +00:00

Compare

araemer referenced this pull request from a commit

2026-09-26 08:56:38 +00:00

fix(meal-plan) move dish card controls down before the title exceeds two lines

araemer commented

2026-09-26 08:57:35 +00:00

Re review comment on MealPlanDishCard.tsx ("i'd like to wrap earlier. The title shouldn't have more than two lines before wrapping."):

Addressed in 862673c. The title's minimum width now depends on its length: half its character count in ch, roughly what two lines need, and never less than the previous 6rem, so short words like "Frikadellen" still aren't hyphenated on phones. Checked in the browser at every content width from 240px to 1100px: no title took more than two lines beside the controls, including a long title with a short unit ("Stück"). It's an estimate, so a very long single word could still cause a third line.

The branch is also rebased onto stage (after #41 and #43), with the conflict resolved. MealPlanRecipeLink got an optional style prop for this.

Posted by Claude Code.

Re review comment on `MealPlanDishCard.tsx` (*"i'd like to wrap earlier. The title shouldn't have more than two lines before wrapping."*): Addressed in 862673c. The title's minimum width now depends on its length: half its character count in `ch`, roughly what two lines need, and never less than the previous 6rem, so short words like "Frikadellen" still aren't hyphenated on phones. Checked in the browser at every content width from 240px to 1100px: no title took more than two lines beside the controls, including a long title with a short unit ("Stück"). It's an estimate, so a very long single word could still cause a third line. The branch is also rebased onto `stage` (after #41 and #43), with the conflict resolved. `MealPlanRecipeLink` got an optional `style` prop for this. _Posted by Claude Code._

araemer merged commit 262d1b2454 into stage

2026-09-26 08:58:40 +00:00

araemer referenced this pull request from a commit

2026-09-26 08:58:41 +00:00

Merge pull request 'fix(meal-plan) wrap dish card controls onto a second line when space runs out' (#42) from meal-plan-dish-card-wrap into stage

Sign in to join this conversation.

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

araemer/recipe-app!42

Rows
Columns