feat: US-023 - Scale LastConsultationSubsection and main content padding

Ralph/prd.json

@@ -123,7 +123,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 6,
-      "passes": false,
+      "passes": true,
       "notes": "LastConsultationSubsection is defined inline in DashboardLayout.tsx (around lines 57-232). The main content padding classes are on the <motion.main> element around line 369."
     },
     {

Ralph/progress.txt

@@ -117,3 +117,17 @@
   - The sublabel uses font-geist (monospace) for the "technical texture" pattern
 ---
 
+## 2026-02-14 — US-023
+- Scaled LastConsultationSubsection: field label 10px→12px, field value 11.5px→13px, role title 13.5px→15px
+- Examination bullet fontSize 12.5px→14px, bullet dot top offset 7px→8px for new line height
+- View full record button 12px→13px, ChevronRight 14→15
+- Field gap 16px→20px for better spacing between metadata fields
+- Updated main content padding from 'p-4 pb-8 md:p-6 md:pb-10 lg:px-7 lg:pt-6 lg:pb-10' to 'p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12'
+- Files changed: src/components/DashboardLayout.tsx
+- **Learnings for future iterations:**
+  - LastConsultationSubsection is defined inline in DashboardLayout.tsx (lines ~57-232), not in a separate file
+  - fieldLabelStyle and fieldValueStyle are shared CSSProperties objects — changing them updates all 4 field columns (Date, Organisation, Type, Band) at once
+  - The bullet dot `top` offset needs to be adjusted when bullet fontSize changes — at 14px text with 1.5 line-height, 8px top centers the 5px dot
+  - Main content padding uses Tailwind responsive classes on <motion.main> — these are cumulative (p-5 base, md:p-7 overrides, lg:px-8/lg:pt-7 overrides further)
+---
+

src/components/DashboardLayout.tsx

@@ -89,7 +89,7 @@ function LastConsultationSubsection() {
   }
 
   const fieldLabelStyle: React.CSSProperties = {
-    fontSize: '10px',
+    fontSize: '12px',
     textTransform: 'uppercase',
     letterSpacing: '0.06em',
     color: 'var(--text-tertiary)',
@@ -97,7 +97,7 @@ function LastConsultationSubsection() {
   }
 
   const fieldValueStyle: React.CSSProperties = {
-    fontSize: '11.5px',
+    fontSize: '13px',
     fontWeight: 600,
     color: 'var(--text-primary)',
   }
@@ -114,7 +114,7 @@ function LastConsultationSubsection() {
         style={{
           display: 'flex',
           flexWrap: 'wrap',
-          gap: '16px',
+          gap: '20px',
           marginBottom: '14px',
           paddingBottom: '14px',
           borderBottom: '1px solid var(--border-light)',
@@ -152,7 +152,7 @@ function LastConsultationSubsection() {
 
       <div
         style={{
-          fontSize: '13.5px',
+          fontSize: '15px',
           fontWeight: 600,
           color: 'var(--accent)',
           marginBottom: '12px',
@@ -176,7 +176,7 @@ function LastConsultationSubsection() {
           <li
             key={index}
             style={{
-              fontSize: '12.5px',
+              fontSize: '14px',
               color: 'var(--text-primary)',
               paddingLeft: '16px',
               lineHeight: '1.5',
@@ -188,7 +188,7 @@ function LastConsultationSubsection() {
               style={{
                 position: 'absolute',
                 left: '0',
-                top: '7px',
+                top: '8px',
                 width: '5px',
                 height: '5px',
                 borderRadius: '50%',
@@ -207,7 +207,7 @@ function LastConsultationSubsection() {
           display: 'flex',
           alignItems: 'center',
           gap: '6px',
-          fontSize: '12px',
+          fontSize: '13px',
           fontWeight: 500,
           color: 'var(--accent)',
           background: 'transparent',
@@ -226,7 +226,7 @@ function LastConsultationSubsection() {
         aria-label="View full consultation record"
       >
         <span>View full record</span>
-        <ChevronRight size={14} strokeWidth={2.5} />
+        <ChevronRight size={15} strokeWidth={2.5} />
       </button>
     </div>
   )
@@ -366,7 +366,7 @@ export function DashboardLayout() {
           animate="visible"
           variants={contentVariants}
           aria-label="Dashboard content"
-          className="pmr-scrollbar p-4 pb-8 md:p-6 md:pb-10 lg:px-7 lg:pt-6 lg:pb-10"
+          className="pmr-scrollbar p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12"
           style={{
             flex: 1,
             overflowY: 'auto',