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/components/prism/TickerHeader.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'frontend/components/prism')

diff --git a/frontend/components/prism/TickerHeader.tsx b/frontend/components/prism/TickerHeader.tsx
index 369d06c..804ffc0 100644
--- a/frontend/components/prism/TickerHeader.tsx
+++ b/frontend/components/prism/TickerHeader.tsx
@@ -1,5 +1,5 @@
 import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format";
-import { buildIdentityLine, rangePercent } from "@/lib/overview";
+import { rangePercent } from "@/lib/overview";
 import type { TickerOverview } from "@/types/api";
 
 type Props = {
@@ -15,15 +15,17 @@ export function TickerHeader({ overview, onToggleWatchlist, isSaved }: Props) {
   return (
     <header className="psm-ticker-head">
       <div className="psm-header-left">
+        {overview.profile.sector && (
+          <span className="psm-sector-label">{overview.profile.sector}</span>
+        )}
+        <div className="psm-heading-row">
+          <span className="psm-company-sym">{overview.profile.symbol}</span>
+          <span className="psm-company-name">{overview.profile.name || "Name unavailable"}</span>
+        </div>
         <div className="psm-head-meta">
-          <span className="psm-identity-line psm-eyebrow">{overview.profile.symbol}</span>
           {overview.profile.exchange ? <span className="psm-tag">{overview.profile.exchange}</span> : null}
           {overview.meta.is_partial ? <span className="psm-partial-chip">Partial Data</span> : null}
         </div>
-        <div className="psm-heading-row">
-          <span className="psm-company-name">{overview.profile.name || "Name unavailable"}</span>
-        </div>
-        <p className="psm-subline">{buildIdentityLine(overview)}</p>
       </div>
 
       <div className="psm-range">
-- 
cgit v1.3-2-g0d8e