feat: US-022 - Scale PatientSummaryTile content and KPIs

Ralph/prd.json

@@ -84,7 +84,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 4,
-      "passes": false,
+      "passes": true,
       "notes": "Sidebar width is already updated via CSS var in US-019. This story handles all internal sizing. The sidebar has many repeated patterns (detail rows) — ensure consistency across all rows."
     },
     {
@@ -103,7 +103,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 5,
-      "passes": false,
+      "passes": true,
       "notes": "The profile text is the largest body copy block in the dashboard — it must feel effortlessly readable. KPI values should be the most visually prominent numbers on the page."
     },
     {

Ralph/progress.txt

@@ -90,3 +90,30 @@
   - US-028 will revert this exact change back to 'boot'
 ---
 
+## 2026-02-14 — US-021
+- Scaled all Sidebar internal sizing: padding, avatar, name, title, status badge, detail rows, SectionTitle, TagPill, AlertFlag
+- Sidebar padding 20px/16px → 24px/20px, avatar 52→60px, name 15→17px, title 11.5→13px
+- Status badge 11→12px, dot 6→7px, all detail rows 11.5→13px, GPhC mono 11→12px
+- SectionTitle 10→11px, TagPill 10.5→12px (padding 3px/8px → 4px/10px)
+- AlertFlag 11→13px (padding 7px/10px → 8px/12px), icon 14→16, container 16→18px
+- Detail row padding 2px → 4px, grid gap 6→8px, PersonHeader marginBottom 6→10px
+- Tags/Alerts section padding 14px/6px → 16px/8px
+- Files changed: src/components/Sidebar.tsx
+- **Learnings for future iterations:**
+  - Sidebar has 6 identical detail row blocks (GPhC, Education, Location, Phone, Email, Registered) — use replace_all for fontSize/padding changes
+  - SectionTitle fontSize affects both Tags and Alerts section headers
+  - The sidebar width itself comes from CSS var --sidebar-width (updated in US-019), not from Sidebar.tsx
+  - Tags gap (5px) and alerts gap (6px) were left as-is — they looked proportional already
+---
+
+## 2026-02-14 — US-022
+- Scaled PatientSummaryTile: profile text 13px→15px (lineHeight 1.6→1.65), KPI value 28px→34px, label 12px→14px, sublabel 10px→12px
+- KPI card padding 16px→20px, grid gap 12px→16px, Latest Results marginTop 24px→28px
+- Files changed: src/components/tiles/PatientSummaryTile.tsx
+- **Learnings for future iterations:**
+  - PatientSummaryTile has two main sections: profile text block and KPI grid (Latest Results)
+  - MetricCard is a local component (not exported) — all KPI styling is self-contained in this file
+  - KPI grid uses Tailwind responsive classes (grid-cols-1 xs:grid-cols-2) combined with inline style for gap
+  - The sublabel uses font-geist (monospace) for the "technical texture" pattern
+---
+

src/components/tiles/PatientSummaryTile.tsx

@@ -32,7 +32,7 @@ function MetricCard({ kpi }: MetricCardProps) {
   const buttonStyles: React.CSSProperties = {
     width: '100%',
     textAlign: 'left',
-    padding: '16px',
+    padding: '20px',
     background: 'var(--surface)',
     border: '1px solid var(--border-light)',
     borderRadius: 'var(--radius-sm)',
@@ -41,7 +41,7 @@ function MetricCard({ kpi }: MetricCardProps) {
   }
 
   const valueStyles: React.CSSProperties = {
-    fontSize: '28px',
+    fontSize: '34px',
     fontWeight: 700,
     letterSpacing: '-0.02em',
     lineHeight: 1.2,
@@ -49,14 +49,14 @@ function MetricCard({ kpi }: MetricCardProps) {
   }
 
   const labelStyles: React.CSSProperties = {
-    fontSize: '12px',
+    fontSize: '14px',
     fontWeight: 500,
     color: 'var(--text-primary)',
     marginTop: '4px',
   }
 
   const subStyles: React.CSSProperties = {
-    fontSize: '10px',
+    fontSize: '12px',
     color: 'var(--text-tertiary)',
     fontFamily: 'var(--font-geist-mono)',
     marginTop: '2px',
@@ -86,14 +86,14 @@ function MetricCard({ kpi }: MetricCardProps) {
 
 export function PatientSummaryTile() {
   const profileTextStyles: React.CSSProperties = {
-    fontSize: '13px',
-    lineHeight: '1.6',
+    fontSize: '15px',
+    lineHeight: '1.65',
     color: 'var(--text-primary)',
   }
 
   const kpiGridStyles: React.CSSProperties = {
     display: 'grid',
-    gap: '12px',
+    gap: '16px',
   }
 
   return (
@@ -110,7 +110,7 @@ export function PatientSummaryTile() {
       </div>
 
       {/* Latest Results subsection */}
-      <div style={{ marginTop: '24px' }}>
+      <div style={{ marginTop: '28px' }}>
         <CardHeader dotColor="teal" title="LATEST RESULTS" rightText="Updated May 2025" />
         <div className="grid-cols-1 xs:grid-cols-2" style={kpiGridStyles}>
           {kpis.map((kpi) => (