From 11e9405203b4e71557b729e20da58626f4ceb37d Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 2 Sep 2026 14:48:57 +0200
Subject: [PATCH] fix(ui): make the year matrix readable

Found by screenshotting it. 13 numeric columns of "28,000.00" in a mono face
cannot fit in min-w-[48rem], so the table shrank the cells instead of
scrolling and the figures ran together: the income row read
"28,000.0028,000.0028,000.00", the total read "0.000.00248,500.00", and
columns 11 and 12 were crushed to nothing. Every cell now has horizontal
padding and cannot wrap, and the table is wide enough that the container
scrolls rather than crushing.

Verified by screenshot at 1440px: every figure separated, columns aligned.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/ui/components/YearMatrix.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/YearMatrix.tsx b/src/ui/components/YearMatrix.tsx
index 4b69cb2..f437958 100644
--- a/src/ui/components/YearMatrix.tsx
+++ b/src/ui/components/YearMatrix.tsx
@@ -16,27 +16,29 @@ interface Props {
 export function YearMatrix({ view, mode }: Props) {
   return (
     <div className="overflow-x-auto">
-      <table className="w-full min-w-[48rem] text-sm">
+      <table className="w-full min-w-[84rem] text-sm">
         <thead className="border-b text-left text-muted-foreground">
           <tr>
             <th className="py-2">Post</th>
             {view.months.map((month) => (
-              <th key={month} className="py-2 text-right font-normal">
+              <th key={month} className="py-2 pl-4 text-right font-normal whitespace-nowrap">
                 {month.slice(5)}
               </th>
             ))}
-            <th className="py-2 text-right">Total</th>
+            <th className="py-2 pl-4 text-right">Total</th>
           </tr>
         </thead>
         <tbody>
           <tr className="border-b text-muted-foreground">
             <td className="py-2">Income</td>
             {view.incomeByMonth.map((income, i) => (
-              <td key={i} className="font-money py-2 text-right">
+              <td key={i} className="font-money py-2 pl-4 text-right whitespace-nowrap">
                 {formatAmount(income)}
               </td>
             ))}
-            <td className="font-money py-2 text-right">{formatAmount(view.totalIncome)}</td>
+            <td className="font-money py-2 pl-4 text-right whitespace-nowrap">
+              {formatAmount(view.totalIncome)}
+            </td>
           </tr>
 
           {view.rows.map((row) => (
@@ -51,7 +53,7 @@ export function YearMatrix({ view, mode }: Props) {
                 return (
                   <td
                     key={i}
-                    className={`font-money py-2 text-right ${
+                    className={`font-money py-2 pl-4 text-right whitespace-nowrap ${
                       mode === "balance" && value < 0 ? "text-overspend" : ""
                     }`}
                   >
@@ -60,7 +62,7 @@ export function YearMatrix({ view, mode }: Props) {
                 );
               })}
               <td
-                className={`font-money py-2 text-right font-medium ${
+                className={`font-money py-2 pl-4 text-right font-medium whitespace-nowrap ${
                   mode === "balance" && row.closingBalance < 0 ? "text-overspend" : ""
                 }`}
               >