araemer/recipe-app
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases 39 Packages Wiki Activity Actions

fix(shopping-list) Use icon buttons for the item actions in the detail panel #58

Merged
araemer merged 2 commits from shopping-list-item-icon-actions into stage 2026-10-04 06:11:59 +00:00
Conversation 0 Commits 2 Files changed 2 +19 -16
araemer commented 2026-10-04 06:03:29 +00:00
Owner
Copy link

The detail panel of a shopping list item showed "Bearbeiten", "Verschieben" and "Entfernen" as three full text buttons. On a narrow screen they wrapped below each other instead of becoming icon buttons, unlike the rest of the app.

Change

  • ShoppingListItemRow: the three actions are icon-only IconButtons (pencil, arrows, bin) with the 44 px touch target and the same icon size as the list actions on the overview. They sit to the right of the "why is this here" text, in one row at every width. "Entfernen" uses the danger variant.
  • docs/architecture.md: the component description says "icon-only actions".

Behaviour is unchanged: the same actions, the same conditions (no edit on ticked items), the same dialogs.

Verification

stage (with spec 002 and its contract pin) is merged into this branch; the numbers below are from after that merge.

Check Result
npm run lint passes: 0 errors, 2 warnings in MealPlanDayProvider.tsx that are not from this branch
npm run test passes: 39 files, 399 tests
npm run build passes
UI (/verify-ui, as user) At 1920×1080, 1280×800, 800×1280, 400×890, 890×400 and at 320 px the three icons stay in one row inside the item row, 44×44 px each, no horizontal scroll. Edit opens the editor, move opens the target dialog, remove asks for confirmation. A ticked item offers only move and remove.

🤖 Generated with Claude Code

The detail panel of a shopping list item showed "Bearbeiten", "Verschieben" and "Entfernen" as three full text buttons. On a narrow screen they wrapped below each other instead of becoming icon buttons, unlike the rest of the app. ## Change - `ShoppingListItemRow`: the three actions are icon-only `IconButton`s (pencil, arrows, bin) with the 44 px touch target and the same icon size as the list actions on the overview. They sit to the right of the "why is this here" text, in one row at every width. "Entfernen" uses the danger variant. - `docs/architecture.md`: the component description says "icon-only actions". Behaviour is unchanged: the same actions, the same conditions (no edit on ticked items), the same dialogs. ## Verification `stage` (with spec 002 and its contract pin) is merged into this branch; the numbers below are from after that merge. | Check | Result | |---|---| | `npm run lint` | passes: 0 errors, 2 warnings in `MealPlanDayProvider.tsx` that are not from this branch | | `npm run test` | passes: 39 files, 399 tests | | `npm run build` | passes | | UI (`/verify-ui`, as `user`) | At 1920×1080, 1280×800, 800×1280, 400×890, 890×400 and at 320 px the three icons stay in one row inside the item row, 44×44 px each, no horizontal scroll. Edit opens the editor, move opens the target dialog, remove asks for confirmation. A ticked item offers only move and remove. | 🤖 Generated with [Claude Code](https://claude.com/claude-code)
fix(shopping-list) use icon buttons for the item actions in the detail panel
Some checks failed
/ test (pull_request) Successful in 1m5s
Details
/ contract_pin (pull_request) Failing after 2s
Details
520d14cd9b 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merge remote-tracking branch 'origin/stage' into shopping-list-item-icon-actions
All checks were successful
/ test (pull_request) Successful in 1m8s
Details
/ contract_pin (pull_request) Successful in 2s
Details
143de68054 
# Conflicts:
#	docs/architecture.md
araemer merged commit 2aee5cfaa1 into stage 2026-10-04 06:11:59 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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!58
No description provided.