[richiemcilroy]

At 768 px and 1024 px the Billing ledger's Type column shrank to about 70 px. Its label ran over the Reference column and each note wrapped one word per line. The Type cell was w-full max-w-0 with a label that never wraps, and the Reference column now holds "Video 4te2..." style references, wider than the row ids it showed before.

What changed (credit-transaction-table.tsx only)

• The Type cell is w-full min-w-[140px] whitespace-normal, so the label wraps inside its own column and notes wrap at a readable width.
• Below the xl breakpoint the Reference cell stacks the kind ("Video", "Transcript") above the id and caps it at 124 px, with long ids truncated and the full value in the hover title. From xl up it is one line capped at 220 px, as before.
• Capping Reference at 180 px was not enough. With the 140 px Type floor the table needs about 705 px against the 648 px the card has at 768 px, so Amount and Balance would leave the card. Stacking is what makes it fit.
• The breakpoint where the table starts (md) and the phone card list are unchanged.

Proof

Rendered on a separate machine from a local bundle of the real component inside the real Block card, at the card widths production uses at each viewport (measured read-only on cap.so), with a 25-row ledger of the same shape as a production app.

Viewport (card)	main	this branch
768 px (688)	Type 66 px, label over Reference in 26 rows, notes up to 16 lines	Type 162 px, no overlap, notes up to 5 lines, Amount and Balance inside the card
1024 px (692)	Type 70 px, label over Reference in 26 rows	Type 166 px, no overlap, inside the card
1280 px (948)		column widths identical; screenshots pixel-identical
1440 px (1040)		column widths identical; screenshots pixel-identical
390 px phone list		pixel-identical

The bundle's main build gives the same column widths as production at 768 and 1024 px (170, 66, 245, 95, 71), so it renders like the live page.

• Unit tests: the Type cell has min-w-[140px] and whitespace-normal and no max-w-0; the Reference cell's narrow and xl classes; the phone card reference stays inline.
• Infra, developer and billing suites: 130 files, 3,090 tests pass. Typecheck clean apart from the known organization-settings-ownership.test.ts error.

Scope and captures

• The diff touches only apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx and its unit test, apps/web/__tests__/unit/infra-ledger-reference-column.test.ts.
• The Type cell uses !whitespace-normal, because the shared TD class carries whitespace-nowrap and would otherwise win. Re-rendered with the longest real labels ("Storage, first month, part paid", "Storage, first month, unpaid", "Auto top-up declined", "Payment disputed"): at 768 and 1024 px they wrap inside the 162 to 166 px Type column with no overlap, and Amount and Balance stay in the card.
• Before and after captures at 768, 1024, 1280 and 1440 px for the table and 390 px for the phone list; 1280, 1440 and 390 px are pixel-identical to main.

Confidence Score: 5/5

The PR appears safe to merge.

Summary

Makes the billing ledger easier to read at tablet widths.

• Billing transaction rows keep Type and Reference readable in narrow desktop cards.

_{Reviews (3) · Last reviewed commit: "fix(web): make the ledger Type label wra..." · Reviewed by Greptile}

[sandchest-com]

Sandchest reviewed e7bb8d6: nothing exploitable found in this change.

_{Sandchest reviews every change for vulnerabilities an attacker could use · Review details}

[capy-ai]

Capy found 1 potential issue (1 medium).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
cap-status	Skipped		Nov 13, 2026 1:04pm UTC

[richiemcilroy]

hey @greptileai, please re-review the PR

[capy-ai]

Capy found no issues.

[capy-ai]

Capy found no issues.