Wide tables on phones — wrap the row instead of scrolling sideways

[WMP]

The problem

Several tables in the app have more columns than a phone can show. Today they scroll sideways, so the columns on the right move off the screen. The user does not see them until they scroll, and many people never do.

CLAUDE.md already states the rule: on a phone, overflow-x-auto is not containment. A sideways scrollbar can also push page dialogs off the screen.

So this is not one table's problem. It is a pattern question: how should a wide table behave on a phone?

The idea

Wrap the row. On a phone, one row uses two lines, so each column gets about half the width and everything fits. We hide no columns and we scroll nothing sideways.

• Line 1: the row's identity (for example a number and a date) on the left, and the key figure (for example a balance) on the right.
• Line 2: the remaining values, side by side.
• Each value carries its own caption, because the table header is hidden on phones.

From the sm breakpoint up, the ordinary table returns — unchanged.

Proof of concept

To test the pattern on a real, hard case, it is implemented on the Loan Schedule table (8 columns: #, Date, Payment, Interest, Principal, Extra, Rate, Balance).

Before — the table scrolls sideways; Principal / Rate / Balance sit off-screen:

After — the row wraps onto two lines; every column is visible:

How it works

• The change touches the phone view only (below the sm breakpoint). From sm up, the table looks exactly as it does today.
• It is one HTML table, restyled with CSS. Below sm, the row becomes a grid and wraps onto two lines. From sm up, the ordinary table layout returns. No second layout, no duplicated markup.
• Colours and meaning stay (in the loan example: interest in orange, principal in green, extra in blue, projected rows tinted).
• The captions reuse the existing column labels, so this needs no new translation keys.

Where it could apply

The same pattern fits every wide table, for example:

• the transaction register,
• report tables,
• the reconcile table,
• the account / payee / securities lists.

Each table decides its own split — which values share the first line, and which fill the second.

Trade-offs

• Rows are taller, so there is more vertical scrolling. For a dense table this is a fair trade for seeing every column.
• This is a different approach from hiding less-important columns on a phone (what the register does today). We should decide which one is the standard, or where each fits.

Status

• Pilot implemented on branch claude/mobile-table-row-wrapping-gk5ulu (Loan Schedule only).
• Tests, tsc, lint and the UI-convention guards pass. Visual check in a browser at 390 px and 800 px looks correct; the desktop layout is unchanged.

For discussion

1. Do we adopt row wrapping as the standard phone pattern for wide tables?
2. Which tables should move to it first?
3. On a phone, do we keep all columns (wrapping), or still hide some of the less important ones? Or mix both per table?
4. Is a slightly smaller font for numbers on phones acceptable, so a value fits without wrapping inside the number itself?

Note: still needs a visual check on a real device in both themes (light and dark).

[kenlasko]

I would say this should be applied as the Normal part of the Normal/Compact/Dense selection when on mobile. I'd like to see this on the Transactions page as a starting point

[WMP]

Please test:

ghcr.io/wmp/monize-backend:claude-mobile-table-row-wrapping-gk5ulu-60d9c8b
ghcr.io/wmp/monize-frontend:claude-mobile-table-row-wrapping-gk5ulu-60d9c8b

[kenlasko]

Works like a charm. I actually prefer this to the compact/dense views on mobile! Create a PR and I will merge it immediately.