From d9f9e8a920bdc932a573db7f411dea3471c49a2e Mon Sep 17 00:00:00 2001
From: Ricardo Mancinas <rmancinas@freakma.net>
Date: Thu, 23 Jul 2026 11:41:06 -0700
Subject: [PATCH] fix(web): stop large balances clipping on the statement page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TRASPASOS PAYPAL's 7-figure balances exposed three layout bugs on
/estado-cuenta/[id], all invisible on normal small-figure customers:

- summary/línea cards: `summary-grid` uses auto-fill, so a single- or
  two-currency card never widens past the min track (~190px) however wide
  the page is. The 24px nowrap headline (-$7,028,533.44) overflowed the
  card border. Widen the min track to 260px so the figure fits in full,
  and drop the size to 22px. Explicitly no ellipsis — a truncated money
  figure reads as a wrong number.
- `concept-list` had no horizontal padding (`.card` carries none), so the
  concept totals sat flush on the card border. Pad it.
- the Cargo/Abono direction label was an inline span glued to the amount;
  make it a block so it drops onto its own line. Same fix applied to the
  movement-list page for consistency.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/src/app/estado-cuenta/[id]/page.tsx |  2 +-
 apps/web/src/app/estado-cuenta/page.tsx      |  4 ++--
 apps/web/src/app/globals.css                 | 13 ++++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/estado-cuenta/[id]/page.tsx b/apps/web/src/app/estado-cuenta/[id]/page.tsx
index a684c09..e04391f 100644
--- a/apps/web/src/app/estado-cuenta/[id]/page.tsx
+++ b/apps/web/src/app/estado-cuenta/[id]/page.tsx
@@ -448,7 +448,7 @@ function StatementRow({ m }: { m: StatementMovement }) {
         <span className={`tx-amount ${m.direction === "charge" ? "neg" : "pos"}`}>
           {formatMoney(m.amount, m.currency)}
         </span>
-        <span className="tx-cur">{directionLabel(m.direction)}</span>
+        <div className="tx-cur">{directionLabel(m.direction)}</div>
       </td>
       <td className="num">
         <span className={`bal-running ${balanceTone(m.balanceAfter)}`}>
diff --git a/apps/web/src/app/estado-cuenta/page.tsx b/apps/web/src/app/estado-cuenta/page.tsx
index 9034c3f..d09302e 100644
--- a/apps/web/src/app/estado-cuenta/page.tsx
+++ b/apps/web/src/app/estado-cuenta/page.tsx
@@ -772,9 +772,9 @@ function MovementRow({ m }: { m: MovementListItem }) {
         <span className={`tx-amount ${m.direction === "charge" ? "neg" : "pos"}`}>
           {formatMoney(m.amount, m.currency)}
         </span>
-        <span className="tx-cur">
+        <div className="tx-cur">
           {m.currency} · {directionLabel(m.direction)}
-        </span>
+        </div>
       </td>
     </tr>
   );
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 63bc03d..f91f699 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1270,7 +1270,10 @@ button {
    ========================================================================== */
 .summary-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  /* Min track holds a 7-figure balance (e.g. TRASPASOS PAYPAL's -$7,028,533.44)
+     in full — auto-fill packs fixed-width tracks, so a single-currency card
+     never widens on its own and the min is what has to fit the number. */
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
   margin-bottom: 18px;
 }
@@ -1302,11 +1305,13 @@ button {
 }
 .summary-total {
   font-family: var(--font-display);
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 560;
   margin-top: 8px;
   font-feature-settings: "tnum" 1;
   color: var(--ink);
+  /* Never truncate a balance — a clipped money figure reads as a wrong number.
+     The track width above is what keeps it inside the card. */
 }
 .summary-count {
   font-size: 12px;
@@ -1988,10 +1993,12 @@ button {
   color: var(--ink);
 }
 
-/* Charges broken out by concept, with a proportional bar. */
+/* Charges broken out by concept, with a proportional bar. `.card` carries no
+   padding, so the list pads itself — otherwise the total sits on the border. */
 .concept-list {
   display: flex;
   flex-direction: column;
+  padding: 4px 16px;
 }
 .concept-row {
   display: grid;