The review and confirm steps were rendering as wide editable tables
inside a `sm:max-w-3xl` dialog (~768px). The inputs alone consumed
~750px before padding, so on smaller desktop windows the content was
clipped left/right, and on mobile it was effectively unusable.
Two-pronged fix:
- Widen the dialog itself to `md:max-w-5xl xl:max-w-6xl` so the table
has room on typical desktops. Mobile stays full-width minus margin.
- Split each step into responsive layouts gated by Tailwind's `md:`
breakpoint. Desktop keeps the editable table (now with fixed-width
columns, an inline status badge instead of a separate Status column,
and `overflow-auto` as a graceful fallback at intermediate widths).
Below `md:`, rows render as stacked cards — checkbox + date + status
on top, description full-width, amount + type wrapped, transfer
destination dropping below when applicable. Same data, no horizontal
scrolling on phones.
The Confirm step's expand-to-preview table gets the same treatment:
table on desktop, summary cards on mobile.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
TehRiehlDeal