fix(web): Infra ledger stays readable at 768 and 1024 px

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,51 @@ 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("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(
+				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(

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 (
 		<span title={`${reference.kind} ${reference.value}`} className={className}>
-			{reference.kind}{" "}
-			<span className={clsx(MONO, "text-[12px]")}>{reference.value}</span>
+			<span className={clsx(stacked && "block truncate xl:inline")}>
+				{reference.kind}
+			</span>{" "}
+			<span
+				className={clsx(
+					MONO,
+					"text-[12px]",
+					stacked && "block truncate xl:inline",
+				)}
+			>
+				{reference.value}
+			</span>
 		</span>
 	);
 }
@@ -72,15 +89,12 @@ export function CreditTransactionTable({
 									{formatLedgerTime(tx.createdAt)}
 								</time>
 							</td>
-							<td className={clsx(TD, "w-full max-w-0 text-[#E8ECF4]")}>
+							<td className={clsx(TD, LEDGER_TYPE_CELL, "text-[#E8ECF4]")}>
 								{describeLedgerRow(tx).label}
 								<Note row={tx} />
 							</td>
 							<td className={clsx(TD, "text-[12.5px]")}>
-								<Reference
-									row={tx}
-									className="inline-block max-w-[220px] truncate align-bottom"
-								/>
+								<Reference row={tx} className={LEDGER_REFERENCE_CELL} stacked />
 							</td>
 							<td
 								className={clsx(