From 336ae74d9786d0361e2759bd8897902ab7911d6b Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sun, 17 May 2026 13:51:02 -0700
Subject: Align Overview UI with kit mockup: adaptive Reference card,
 TickerHeader hierarchy, chart width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatsCard filters null ratio rows; shows '· Statement data incomplete' note instead of wall of Unavailable
- TickerHeader restructured to match kit: symbol (64px display) dominant beside company name (24px italic), sector label above, chips below
- Fix broken --fs-56 token in company name clamp → --fs-64
- Chart fills full panel width via .psm-chart-frame .chart { width: 100% }

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/page.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'frontend/app/page.tsx')

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 41408b0..013b93d 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -511,6 +511,9 @@ function StatsCard({ overview }: { overview: TickerOverview }) {
     { label: "Payout Ratio", value: fmtPct(overview.ratios.dividend_payout_ratio_ttm), missing: overview.ratios.dividend_payout_ratio_ttm == null }
   ];
 
+  const visibleRows = referenceRows.filter((r) => !r.missing);
+  const suppressedCount = referenceRows.length - visibleRows.length;
+
   return (
     <section className="psm-card">
       <div className="psm-card-head">
@@ -519,11 +522,18 @@ function StatsCard({ overview }: { overview: TickerOverview }) {
           <h2 className="psm-card-title">Reference</h2>
         </div>
       </div>
-      <div className="psm-stat-list">
-        {referenceRows.map((row) => (
-          <StatRow key={row.label} label={row.label} value={row.value} missing={row.missing} />
-        ))}
-      </div>
+      {visibleRows.length > 0 && (
+        <div className="psm-stat-list">
+          {visibleRows.map((row) => (
+            <StatRow key={row.label} label={row.label} value={row.value} missing={false} />
+          ))}
+        </div>
+      )}
+      {suppressedCount > 0 && (
+        <p className="psm-muted-copy" style={{ marginTop: visibleRows.length > 0 ? "var(--sp-4)" : 0 }}>
+          · Statement data incomplete
+        </p>
+      )}
     </section>
   );
 }
-- 
cgit v1.3-2-g0d8e