From f9b4062dd55135f9ac2fc0f873c739936d05d67b Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Sat, 14 Feb 2026 18:41:07 +0000
Subject: [PATCH] feat: US-014 - Responsive verification and fixes across
 breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix grid overflow at mobile: add minWidth:0 + overflow:hidden to Card
- Scale ParentSection h2 responsively (1.5rem mobile → 2.4rem desktop)
- Make KPI grid single-column below 480px, 2-column above
- Fix SubNav alignment: left-aligned on mobile, centered on md+
- Fix SubNav tileIds to match restructured dashboard sections
- Add data-tile-id anchors to experience/skills/education subsections
---
 src/components/Card.tsx                     |  2 ++
 src/components/DashboardLayout.tsx          | 12 +++++++++---
 src/components/ParentSection.tsx            |  2 +-
 src/components/SubNav.tsx                   |  9 ++++-----
 src/components/tiles/PatientSummaryTile.tsx |  3 +--
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index a5e9fff..6f2b279 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -20,6 +20,8 @@ export function Card({ children, full, className, tileId }: CardProps) {
     boxShadow: isHovered ? 'var(--shadow-md)' : 'var(--shadow-sm)',
     transition: 'box-shadow 0.2s, border-color 0.2s',
     gridColumn: full ? '1 / -1' : undefined,
+    minWidth: 0,
+    overflow: 'hidden',
   }
 
   return (
diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index 58dc190..1959029 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -392,12 +392,18 @@ export function DashboardLayout() {
 
               {/* Two-column experience/skills grid */}
               <div className="pathway-columns" style={{ marginTop: '24px' }}>
-                <WorkExperienceSubsection onNodeHighlight={handleNodeHighlight} />
-                <RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} />
+                <div data-tile-id="section-experience">
+                  <WorkExperienceSubsection onNodeHighlight={handleNodeHighlight} />
+                </div>
+                <div data-tile-id="section-skills">
+                  <RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} />
+                </div>
               </div>
 
               {/* Education subsection */}
-              <EducationSubsection />
+              <div data-tile-id="section-education">
+                <EducationSubsection />
+              </div>
             </ParentSection>
           </div>
         </motion.main>
diff --git a/src/components/ParentSection.tsx b/src/components/ParentSection.tsx
index d5c151c..42f16ac 100644
--- a/src/components/ParentSection.tsx
+++ b/src/components/ParentSection.tsx
@@ -12,8 +12,8 @@ export function ParentSection({ title, children, className, tileId }: ParentSect
   return (
     <Card full className={className} tileId={tileId}>
       <h2
+        className="text-[1.5rem] sm:text-[1.8rem] md:text-[2rem] lg:text-[2.4rem]"
         style={{
-          fontSize: '2.4rem',
           fontWeight: 700,
           color: 'var(--text-primary)',
           lineHeight: 1.1,
diff --git a/src/components/SubNav.tsx b/src/components/SubNav.tsx
index 41fab10..847d0bf 100644
--- a/src/components/SubNav.tsx
+++ b/src/components/SubNav.tsx
@@ -11,10 +11,10 @@ interface SubNavProps {
 
 const sections: NavSection[] = [
   { id: 'overview', label: 'Overview', tileId: 'patient-summary' },
-  { id: 'skills', label: 'Skills', tileId: 'core-skills' },
-  { id: 'experience', label: 'Experience', tileId: 'career-activity' },
+  { id: 'skills', label: 'Skills', tileId: 'section-skills' },
+  { id: 'experience', label: 'Experience', tileId: 'section-experience' },
   { id: 'projects', label: 'Projects', tileId: 'projects' },
-  { id: 'education', label: 'Education', tileId: 'education' },
+  { id: 'education', label: 'Education', tileId: 'section-education' },
 ]
 
 export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
@@ -31,7 +31,7 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
   return (
     <nav
       aria-label="Section navigation"
-      className="subnav-scroll"
+      className="subnav-scroll md:justify-center"
       style={{
         position: 'sticky',
         top: 'var(--topbar-height)',
@@ -41,7 +41,6 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
         borderBottom: '1px solid var(--border-light)',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
         gap: '24px',
         overflowX: 'auto',
         overflowY: 'hidden',
diff --git a/src/components/tiles/PatientSummaryTile.tsx b/src/components/tiles/PatientSummaryTile.tsx
index 9b4b6bd..17e7295 100644
--- a/src/components/tiles/PatientSummaryTile.tsx
+++ b/src/components/tiles/PatientSummaryTile.tsx
@@ -93,7 +93,6 @@ export function PatientSummaryTile() {
 
   const kpiGridStyles: React.CSSProperties = {
     display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
     gap: '12px',
   }
 
@@ -113,7 +112,7 @@ export function PatientSummaryTile() {
       {/* Latest Results subsection */}
       <div style={{ marginTop: '24px' }}>
         <CardHeader dotColor="teal" title="LATEST RESULTS" rightText="Updated May 2025" />
-        <div style={kpiGridStyles}>
+        <div className="grid-cols-1 xs:grid-cols-2" style={kpiGridStyles}>
           {kpis.map((kpi) => (
             <MetricCard key={kpi.id} kpi={kpi} />
           ))}