feat: US-020 - Scale TopBar and SubNav

Ralph/prd.json

@@ -34,7 +34,7 @@
         "Typecheck passes"
       ],
       "priority": 2,
-      "passes": false,
+      "passes": true,
       "notes": "These are foundational tokens — many components reference --sidebar-width, --topbar-height, --subnav-height via CSS vars, so changes propagate automatically. Card.tsx changes affect every card and subsection header in the dashboard."
     },
     {
@@ -58,7 +58,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 3,
-      "passes": false,
+      "passes": true,
       "notes": "TopBar and SubNav heights are controlled by CSS vars updated in US-019. This story just scales the internal text and elements. The search bar min/max widths may also need slight adjustment — use judgement."
     },
     {

Ralph/progress.txt

@@ -58,6 +58,28 @@
 
 ---
 
+## 2026-02-14 — US-019
+- Updated --sidebar-width 272px→304px, --topbar-height 48px→56px, --subnav-height 36px→42px in index.css
+- Updated .dashboard-grid gap from 12px→14px (mobile), 16px→20px (tablet/desktop)
+- Updated Card.tsx: padding 20px→24px, CardHeader title fontSize 12px→13px, rightText fontSize 10px→11px, dot 8px→9px, marginBottom 16px→18px
+- Files changed: src/index.css, src/components/Card.tsx
+- **Learnings for future iterations:**
+  - CSS vars (--sidebar-width, --topbar-height, --subnav-height) propagate automatically to TopBar, Sidebar, DashboardLayout — no additional changes needed
+  - Card padding and CardHeader sizing affect every tile in the dashboard since all tiles use these components
+  - Dashboard grid gap is defined in 3 media query blocks in index.css: base (mobile), 768px (tablet), 1024px (desktop)
+---
+
+## 2026-02-14 — US-020
+- Scaled TopBar: brand text 13px→15px, 'Remote' label 11px→12px, search text 13px→14px, search height 42px→46px, Ctrl+K kbd 10px→11px, A.RECRUITER 12px→13px, session badge 11px→12px, skip-link 13px→14px, Home icon 18→20, Search icon 16→17
+- Scaled SubNav: tab fontSize 13px→14px, minHeight 36px→42px
+- Files changed: src/components/TopBar.tsx, src/components/SubNav.tsx
+- **Learnings for future iterations:**
+  - TopBar has two brand spans: one for desktop (sm:inline) and one for mobile (sm:hidden) — both need fontSize updates
+  - TopBar session badge also has two spans: one for xs+ (xs:inline) and one for mobile (xs:hidden) — both need updating
+  - SubNav height is controlled by both the CSS var (--subnav-height) and the button minHeight — both should match
+  - SubNav uses sticky positioning with top: var(--topbar-height), so it automatically adjusts when topbar height changes
+---
+
 ## 2026-02-14 — US-018
 - Changed initial Phase state from 'boot' to 'pmr' in src/App.tsx (line 47)
 - Boot/ECG/login phases remain in code — only the default state changed

src/components/SubNav.tsx

@@ -58,7 +58,7 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
             aria-current={isActive ? 'true' : undefined}
             style={{
               position: 'relative',
-              fontSize: '13px',
+              fontSize: '14px',
               fontWeight: 500,
               color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
               background: 'none',
@@ -68,7 +68,7 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
               transition: 'color 200ms ease-out',
               fontFamily: 'var(--font-ui)',
               flexShrink: 0,
-              minHeight: '36px',
+              minHeight: '42px',
               display: 'flex',
               alignItems: 'center',
             }}

src/components/TopBar.tsx

@@ -40,7 +40,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
           textDecoration: 'none',
           zIndex: 101,
           borderRadius: '0 0 4px 0',
-          fontSize: '13px',
+          fontSize: '14px',
           fontWeight: 600,
         }}
         onFocus={(e) => {
@@ -55,14 +55,14 @@ export function TopBar({ onSearchClick }: TopBarProps) {
       {/* Brand */}
       <div className="flex items-center gap-2 shrink-0">
         <Home
-          size={18}
+          size={20}
           style={{ color: 'var(--accent)' }}
           aria-hidden="true"
         />
         <span
           className="font-ui hidden sm:inline"
           style={{
-            fontSize: '13px',
+            fontSize: '15px',
             fontWeight: 600,
             color: 'var(--text-primary)',
           }}
@@ -72,7 +72,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <span
           className="font-ui sm:hidden"
           style={{
-            fontSize: '13px',
+            fontSize: '15px',
             fontWeight: 600,
             color: 'var(--text-primary)',
           }}
@@ -82,7 +82,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <span
           className="hidden md:inline"
           style={{
-            fontSize: '11px',
+            fontSize: '12px',
             fontWeight: 400,
             color: 'var(--text-tertiary)',
             marginLeft: '2px',
@@ -100,7 +100,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         style={{
           maxWidth: '560px',
           minWidth: '400px',
-          height: '42px',
+          height: '46px',
           border: '1.5px solid var(--border)',
           borderRadius: 'var(--radius-card)',
           padding: '0 14px',
@@ -126,14 +126,14 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         aria-label="Search records, experience, skills. Press Control plus K"
       >
         <Search
-          size={16}
+          size={17}
           style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}
           aria-hidden="true"
         />
         <span
           className="flex-1 text-left"
           style={{
-            fontSize: '13px',
+            fontSize: '14px',
             color: 'var(--text-tertiary)',
             fontFamily: 'var(--font-ui)',
           }}
@@ -143,7 +143,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <kbd
           className="font-geist"
           style={{
-            fontSize: '10px',
+            fontSize: '11px',
             color: 'var(--text-tertiary)',
             background: 'var(--bg-dashboard)',
             border: '1px solid var(--border)',
@@ -164,7 +164,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <span
           className="hidden sm:inline"
           style={{
-            fontSize: '12px',
+            fontSize: '13px',
             color: 'var(--text-secondary)',
             fontFamily: 'var(--font-ui)',
           }}
@@ -174,7 +174,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <span
           className="font-geist hidden xs:inline"
           style={{
-            fontSize: '11px',
+            fontSize: '12px',
             color: 'var(--text-tertiary)',
             background: 'var(--accent-light)',
             padding: '3px 10px',
@@ -187,7 +187,7 @@ export function TopBar({ onSearchClick }: TopBarProps) {
         <span
           className="font-geist xs:hidden"
           style={{
-            fontSize: '11px',
+            fontSize: '12px',
             color: 'var(--text-tertiary)',
             background: 'var(--accent-light)',
             padding: '3px 8px',