From 0f1aa67b328cb6f63c996eb357beabac712b01ea Mon Sep 17 00:00:00 2001 From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com> Date: Fri, 13 Nov 2026 07:53:07 -0500 Subject: [PATCH 1/3] fix(web): keep the Infra ledger readable when the table is narrow --- .../_components/credit-transaction-table.tsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx b/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx index c8eec4344d..f984f8b22a 100644 --- a/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx +++ b/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx @@ -16,6 +16,11 @@ function amountText(microCredits: number) { export const NO_REFERENCE = "–"; +export const LEDGER_TYPE_CELL = "w-full min-w-[140px] whitespace-normal"; + +export const LEDGER_REFERENCE_CELL = + "block max-w-[124px] xl:inline-block xl:max-w-[220px] xl:truncate xl:align-bottom"; + function Note({ row }: { row: LedgerRow }) { const { note } = describeLedgerRow(row); if (!note) return null; @@ -29,16 +34,28 @@ function Note({ row }: { row: LedgerRow }) { export function Reference({ row, className, + stacked = false, }: { row: LedgerRow; className?: string; + stacked?: boolean; }) { const { reference } = describeLedgerRow(row); if (!reference) return <>{NO_REFERENCE}; return ( - {reference.kind}{" "} - {reference.value} + + {reference.kind} + {" "} + + {reference.value} + ); } @@ -72,15 +89,12 @@ export function CreditTransactionTable({ {formatLedgerTime(tx.createdAt)} - + {describeLedgerRow(tx).label} - + Date: Fri, 13 Nov 2026 07:53:07 -0500 Subject: [PATCH 2/3] test(web): ledger Type and Reference cell classes at narrow widths --- .../infra-ledger-reference-column.test.ts | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts b/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts index 01571a7410..8f5a7eb4e9 100644 --- a/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts +++ b/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts @@ -106,11 +106,18 @@ describe("ledger Reference column", () => { const cell = container.querySelectorAll("table tbody tr td")[2]; const reference = cell?.querySelector("[title]"); expect(reference?.className.split(" ")).toEqual([ - "inline-block", - "max-w-[220px]", - "truncate", - "align-bottom", + "block", + "max-w-[124px]", + "xl:inline-block", + "xl:max-w-[220px]", + "xl:truncate", + "xl:align-bottom", ]); + const [kind, id] = Array.from(reference?.children ?? []); + expect(kind?.className).toBe("block truncate xl:inline"); + expect(id?.className.split(" ")).toEqual( + expect.arrayContaining(["block", "truncate", "xl:inline"]), + ); expect(reference?.getAttribute("title")).toContain(session); expect(reference?.textContent).toContain(session); @@ -119,6 +126,35 @@ describe("ledger Reference column", () => { expect(card?.parentElement?.className).toContain("block truncate"); }); + it("lets the Type label wrap at a readable width so it never runs into Reference", () => { + act(() => + root.render( + createElement(CreditTransactionTable, { transactions: [row({})] }), + ), + ); + + const typeCell = container.querySelectorAll("table tbody tr td")[1]; + const classes = typeCell?.className.split(" ") ?? []; + expect(classes).toEqual( + expect.arrayContaining(["w-full", "min-w-[140px]", "whitespace-normal"]), + ); + expect(classes).not.toContain("max-w-0"); + }); + + it("keeps the phone card reference on one line", () => { + act(() => + root.render( + createElement(CreditTransactionTable, { transactions: [row({})] }), + ), + ); + + const reference = container.querySelector("ul li [title]"); + expect(reference?.getAttribute("class")).toBeNull(); + for (const part of Array.from(reference?.children ?? [])) { + expect(part.getAttribute("class") ?? "").not.toContain("block"); + } + }); + it("shows the same reference on phones", () => { act(() => root.render( From 8a771469d954be8adcbaeb2a30e810e482dbf4c3 Mon Sep 17 00:00:00 2001 From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com> Date: Fri, 13 Nov 2026 07:58:29 -0500 Subject: [PATCH 3/3] fix(web): make the ledger Type label wrap over the table cell's nowrap --- .../unit/infra-ledger-reference-column.test.ts | 18 +++++++++++++++++- .../_components/credit-transaction-table.tsx | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts b/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts index 8f5a7eb4e9..cb157e86bb 100644 --- a/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts +++ b/apps/web/__tests__/unit/infra-ledger-reference-column.test.ts @@ -136,11 +136,27 @@ describe("ledger Reference column", () => { const typeCell = container.querySelectorAll("table tbody tr td")[1]; const classes = typeCell?.className.split(" ") ?? []; expect(classes).toEqual( - expect.arrayContaining(["w-full", "min-w-[140px]", "whitespace-normal"]), + expect.arrayContaining(["w-full", "min-w-[140px]", "!whitespace-normal"]), ); expect(classes).not.toContain("max-w-0"); }); + it("uses the important wrap so the table cell's nowrap cannot win over it", () => { + act(() => + root.render( + createElement(CreditTransactionTable, { transactions: [row({})] }), + ), + ); + + const classes = + container + .querySelectorAll("table tbody tr td")[1] + ?.className.split(" ") ?? []; + expect(classes).toContain("whitespace-nowrap"); + expect(classes).toContain("!whitespace-normal"); + expect(classes).not.toContain("whitespace-normal"); + }); + it("keeps the phone card reference on one line", () => { act(() => root.render( diff --git a/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx b/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx index f984f8b22a..68e1cc8b8d 100644 --- a/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx +++ b/apps/web/app/(infra)/dashboard/infra/_components/credit-transaction-table.tsx @@ -16,7 +16,7 @@ function amountText(microCredits: number) { export const NO_REFERENCE = "–"; -export const LEDGER_TYPE_CELL = "w-full min-w-[140px] whitespace-normal"; +export const LEDGER_TYPE_CELL = "w-full min-w-[140px] !whitespace-normal"; export const LEDGER_REFERENCE_CELL = "block max-w-[124px] xl:inline-block xl:max-w-[220px] xl:truncate xl:align-bottom";