Replace all — with - in all source files (JS, CSS, HTML, JSON,
Markdown) for consistency and readability.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Pointer Events-based drag & drop (touch + mouse compatible):
- Ghost element follows pointer; drops on empty slots move the meal,
drops on occupied slots swap both meals via concurrent PUT requests
- prefers-reduced-motion: no ghost animation, interaction still works
- Suppress-click guard prevents accidental edit modal after drag
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Force left-alignment at every level: meal-slot container, meal-card,
title, meta, and actions. Use align-self: stretch and explicit
text-align: left to prevent any parent from overriding alignment.
Left-aligned text is the correct UX choice for small scannable cards.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Exclude small buttons (task checkboxes, action buttons, color swatches)
from the 44px min-size rule in pwa.css — they already expand touch area
via ::before pseudo-elements. Force consistent left-alignment on meal
card titles, ingredients, and type labels.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Migrate budget, contacts, notes, meals, calendar to use the shared
openModal/closeModal from components/modal.js. Each module now gets
focus-trap, escape-handler, overlay-click, focus-restore, scroll-lock.
Removed ~460 lines of duplicate modal CSS (.budget-modal-overlay,
.contact-modal-overlay, .note-modal-overlay, .meal-modal-overlay,
.event-modal-overlay and their children). Content-specific styles
(color-picker, autocomplete, ingredient-list, etc.) are preserved.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Ulas