Fix ImportStatementDialog overflow on narrow viewports #2

Merged

TehRiehlDeal merged 1 commits from feature/bulk-import-style-fix into main 2026-05-27 15:55:16 -07:00

Conversation 0 Commits 1 Files Changed 3

+202 -56

TehRiehlDeal commented 2026-05-27 15:50:05 -07:00

Owner

Copy Link

Copy Source

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

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 added 1 commit 2026-05-27 15:50:05 -07:00

Fix ImportStatementDialog overflow on narrow viewports ... 062b807732

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 merged commit 2c6db4b0a1 into main 2026-05-27 15:55:16 -07:00

TehRiehlDeal deleted branch feature/bulk-import-style-fix 2026-05-27 15:55:16 -07:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

TehRiehlDeal (Kevin Riehl)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: TehRiehlDeal/TehRiehlBudget#2