From daabfb7fd22ff0eb02afc19c6221328f4fd931cc Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Sat, 14 Feb 2026 20:37:22 +0000
Subject: [PATCH] feat: US-025 - Scale WorkExperienceSubsection and
 RepeatMedicationsSubsection

---
 .../RepeatMedicationsSubsection.tsx           | 24 +++++++++----------
 src/components/WorkExperienceSubsection.tsx   | 22 ++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/RepeatMedicationsSubsection.tsx b/src/components/RepeatMedicationsSubsection.tsx
index 0cb8090..8e2c354 100644
--- a/src/components/RepeatMedicationsSubsection.tsx
+++ b/src/components/RepeatMedicationsSubsection.tsx
@@ -54,7 +54,7 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
         display: 'flex',
         alignItems: 'center',
         gap: '10px',
-        padding: '8px 10px',
+        padding: '10px 12px',
         minHeight: '44px',
         background: 'var(--bg-dashboard)',
         borderRadius: 'var(--radius-sm)',
@@ -75,8 +75,8 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
     >
       <div
         style={{
-          width: '26px',
-          height: '26px',
+          width: '30px',
+          height: '30px',
           borderRadius: '6px',
           background: 'var(--accent-light)',
           color: 'var(--accent)',
@@ -86,12 +86,12 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
           flexShrink: 0,
         }}
       >
-        {IconComponent && <IconComponent size={13} />}
+        {IconComponent && <IconComponent size={15} />}
       </div>
       <div style={{ flex: 1, minWidth: 0 }}>
         <div
           style={{
-            fontSize: '12.5px',
+            fontSize: '14px',
             fontWeight: 600,
             color: 'var(--text-primary)',
             lineHeight: 1.3,
@@ -101,7 +101,7 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
         </div>
         <div
           style={{
-            fontSize: '10.5px',
+            fontSize: '12px',
             color: 'var(--text-tertiary)',
             fontFamily: '"Geist Mono", monospace',
           }}
@@ -111,9 +111,9 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
       </div>
       <div
         style={{
-          fontSize: '10px',
+          fontSize: '11px',
           fontWeight: 500,
-          padding: '2px 7px',
+          padding: '3px 8px',
           borderRadius: '20px',
           background: 'var(--success-light)',
           color: 'var(--success)',
@@ -165,7 +165,7 @@ function CategorySection({
       >
         <span
           style={{
-            fontSize: '10px',
+            fontSize: '11px',
             fontWeight: 600,
             textTransform: 'uppercase',
             letterSpacing: '0.06em',
@@ -184,7 +184,7 @@ function CategorySection({
         />
         <span
           style={{
-            fontSize: '10px',
+            fontSize: '11px',
             color: 'var(--text-tertiary)',
             fontFamily: '"Geist Mono", monospace',
             whiteSpace: 'nowrap',
@@ -193,7 +193,7 @@ function CategorySection({
           {categorySkills.length} items
         </span>
       </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
         {visibleSkills.map((skill) => (
           <SkillRow
             key={skill.id}
@@ -216,7 +216,7 @@ function CategorySection({
             background: 'none',
             border: 'none',
             cursor: 'pointer',
-            fontSize: '11px',
+            fontSize: '12px',
             fontWeight: 500,
             color: 'var(--accent)',
             fontFamily: 'inherit',
diff --git a/src/components/WorkExperienceSubsection.tsx b/src/components/WorkExperienceSubsection.tsx
index a1e7b41..b348827 100644
--- a/src/components/WorkExperienceSubsection.tsx
+++ b/src/components/WorkExperienceSubsection.tsx
@@ -53,7 +53,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
         style={{
           display: 'flex',
           gap: '10px',
-          padding: '10px 12px',
+          padding: '12px 14px',
           cursor: 'pointer',
           minHeight: '44px',
           alignItems: 'flex-start',
@@ -75,8 +75,8 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
         <div
           aria-hidden="true"
           style={{
-            width: '8px',
-            height: '8px',
+            width: '9px',
+            height: '9px',
             borderRadius: '50%',
             background: '#0D6E6E',
             flexShrink: 0,
@@ -88,7 +88,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
         <div style={{ flex: 1, minWidth: 0 }}>
           <div
             style={{
-              fontSize: '12.5px',
+              fontSize: '14px',
               fontWeight: 600,
               color: 'var(--text-primary)',
               lineHeight: 1.3,
@@ -98,7 +98,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
           </div>
           <div
             style={{
-              fontSize: '11px',
+              fontSize: '12px',
               color: 'var(--text-secondary)',
               marginTop: '2px',
             }}
@@ -107,7 +107,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
           </div>
           <div
             style={{
-              fontSize: '10px',
+              fontSize: '11px',
               fontFamily: 'var(--font-mono)',
               color: 'var(--text-tertiary)',
               marginTop: '3px',
@@ -168,7 +168,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
                   <li
                     key={i}
                     style={{
-                      fontSize: '11.5px',
+                      fontSize: '13px',
                       color: 'var(--text-primary)',
                       lineHeight: 1.5,
                       paddingLeft: '12px',
@@ -206,9 +206,9 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
                   <span
                     key={entry.code}
                     style={{
-                      fontSize: '10px',
+                      fontSize: '11px',
                       fontFamily: 'var(--font-mono)',
-                      padding: '2px 6px',
+                      padding: '3px 8px',
                       borderRadius: '4px',
                       background: 'var(--accent-light)',
                       color: 'var(--accent)',
@@ -230,7 +230,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
                   display: 'flex',
                   alignItems: 'center',
                   gap: '4px',
-                  fontSize: '11px',
+                  fontSize: '12px',
                   fontWeight: 500,
                   color: 'var(--accent)',
                   background: 'transparent',
@@ -279,7 +279,7 @@ export function WorkExperienceSubsection({ onNodeHighlight }: WorkExperienceSubs
   return (
     <div>
       <CardHeader dotColor="teal" title="WORK EXPERIENCE" rightText={`${consultations.length} roles`} />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
         {consultations.map((c) => (
           <RoleItem
             key={c.id}