From 27d451624d87584cbbf2ec5a41f322f4a8fa26db Mon Sep 17 00:00:00 2001
From: RyuseiTaniguchi <taniguchi.ryusei@gmail.com>
Date: Sat, 5 Sep 2026 21:02:27 +0900
Subject: [PATCH] fix(dashboard): stop Account Balances and Investments from
 clipping their own numbers

Both widgets wrap a scrollable list in overflow-y-auto without constraining
the other axis, so a row wider than the card (a long name, or an
auto-layout table column) drags a hidden horizontal scrollbar along with
it -- and the Card's own overflow-hidden then clips whatever's past the
edge, including the balance's leading "-$".

- account-balances.tsx: table-fixed + a fixed-width balance column so the
  amount can never be pushed off-screen.
- investments-widget.tsx: add the min-w-0 the row was missing, matching
  the pattern every other dashboard widget already uses.
---
 .../organisms/widgets/account-balances.tsx         | 14 +++++++++++---
 .../organisms/widgets/investments-widget.tsx       |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/widgets/account-balances.tsx b/src/components/organisms/widgets/account-balances.tsx
index d668da7..466d25d 100644
--- a/src/components/organisms/widgets/account-balances.tsx
+++ b/src/components/organisms/widgets/account-balances.tsx
@@ -35,9 +35,17 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
       {/* Account and balance are a real two-column table. The widget shows no
           visible headers, so they are screen-reader only -- without them the
           balances read as an undifferentiated run of numbers. */}
-      <div className="flex-1 overflow-y-auto">
-        <table className="w-full">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        {/* table-fixed pins the balance column to a fixed width so it can
+            never be pushed past the card's edge -- without it the balance
+            column grows to fit its content and drags a horizontal scrollbar
+            (and the card's own overflow-hidden) along with it. */}
+        <table className="w-full table-fixed">
           <caption className="sr-only">Account balances</caption>
+          <colgroup>
+            <col />
+            <col className="w-24" />
+          </colgroup>
           <thead className="sr-only">
             <tr>
               <th scope="col">Account</th>
@@ -58,7 +66,7 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
                     <span className="truncate text-sm">{accountDisplayName(account.name)}</span>
                   </div>
                 </td>
-                <td className="px-1 py-1.5 text-right">
+                <td className="px-1 py-1.5 text-right whitespace-nowrap">
                   <BalanceDisplay
                     amount={account.currentBalance}
                     currency={account.currency ?? "USD"}
diff --git a/src/components/organisms/widgets/investments-widget.tsx b/src/components/organisms/widgets/investments-widget.tsx
index 346c655..5911cbe 100644
--- a/src/components/organisms/widgets/investments-widget.tsx
+++ b/src/components/organisms/widgets/investments-widget.tsx
@@ -49,10 +49,10 @@ export function InvestmentsWidget({
           the list scrolls rather than clipping. The min-height matters for
           anyone whose saved layout still has this widget at one row — without
           it `flex-1` resolves to zero there and the list vanishes entirely. */}
-      <ul className="flex min-h-10 flex-1 flex-col gap-2 overflow-y-auto">
+      <ul className="flex min-h-10 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
         {topHoldings.map((h) => (
           <li key={holdingLabel(h)} className="flex flex-col gap-1">
-            <div className="flex items-baseline justify-between gap-2">
+            <div className="flex min-w-0 items-baseline justify-between gap-2">
               <span className="truncate text-sm font-medium">{holdingLabel(h)}</span>
               <span className="shrink-0 text-sm tabular-nums">
                 {centsToDisplay(h.currentValue)}