US-031: Responsive testing and fixes for all new components

SubNav: horizontal scroll with hidden scrollbar, 44px touch targets.
DetailPanel: close button enlarged to 44px. Touch target fixes on
CoreSkillsTile, ProjectsTile, and LastConsultationTile interactive elements.

src/components/DetailPanel.tsx

@@ -182,8 +182,8 @@ export function DetailPanel() {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '32px',
-              height: '32px',
+              width: '44px',
+              height: '44px',
               border: 'none',
               background: 'transparent',
               borderRadius: 'var(--radius-sm)',

src/components/SubNav.tsx

@@ -31,6 +31,7 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
   return (
     <nav
       aria-label="Section navigation"
+      className="subnav-scroll"
       style={{
         position: 'sticky',
         top: 'var(--topbar-height)',
@@ -42,6 +43,10 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
         alignItems: 'center',
         justifyContent: 'center',
         gap: '24px',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        padding: '0 16px',
+        scrollbarWidth: 'none',
       }}
     >
       {sections.map((section) => {
@@ -59,10 +64,14 @@ export function SubNav({ activeSection, onSectionClick }: SubNavProps) {
               color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
               background: 'none',
               border: 'none',
-              padding: '0 0 2px 0',
+              padding: '0 4px 2px',
               cursor: 'pointer',
               transition: 'color 200ms ease-out',
               fontFamily: 'var(--font-ui)',
+              flexShrink: 0,
+              minHeight: '36px',
+              display: 'flex',
+              alignItems: 'center',
             }}
           >
             {section.label}

src/components/tiles/CoreSkillsTile.tsx

@@ -71,6 +71,7 @@ function SkillRow({ skill, onClick }: SkillRowProps) {
         alignItems: 'center',
         gap: '10px',
         padding: '8px 10px',
+        minHeight: '44px',
         background: 'var(--bg-dashboard)',
         borderRadius: 'var(--radius-sm)',
         border: '1px solid var(--border-light)',
@@ -234,6 +235,7 @@ function CategorySection({
             gap: '4px',
             marginTop: '8px',
             padding: '4px 0',
+            minHeight: '44px',
             background: 'none',
             border: 'none',
             cursor: 'pointer',

src/components/tiles/LastConsultationTile.tsx

@@ -235,6 +235,7 @@ export const LastConsultationTile: React.FC = () => {
           background: 'transparent',
           border: 'none',
           padding: '6px 0',
+          minHeight: '44px',
           cursor: 'pointer',
           transition: 'color 150ms ease-out',
         }}

src/components/tiles/ProjectsTile.tsx

@@ -42,6 +42,7 @@ function ProjectItem({ project, onClick }: ProjectItemProps) {
         border: '1px solid var(--border-light)',
         borderRadius: 'var(--radius-sm)',
         padding: '10px 12px',
+        minHeight: '44px',
         fontSize: '11.5px',
         color: 'var(--text-primary)',
         transition: 'border-color 0.15s, box-shadow 0.15s',