Fix mobile nav: tapping Episodes/Studies opens submenu instead of navigating, larger caret, scrollable open menu; v2.45.1

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.45.0",
+  "version": "2.45.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -13275,7 +13275,20 @@ a.study-track-card:hover {
   }
 
   .header-nav--open {
-    max-height: 660px;
+    max-height: calc(100dvh - var(--site-header-h, 64px));
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .nav-dropdown-label {
+    cursor: pointer;
+  }
+
+  .nav-dropdown-caret {
+    min-width: 44px;
+    min-height: 44px;
+    margin: -0.8rem 0;
+    font-size: 0.9em;
   }
 
   .nav-dropdown-trigger {

src/App.tsx

@@ -472,7 +472,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
           {/* Episodes dropdown */}
           <div ref={dropdownRef} className={`nav-dropdown${episodesOpen ? ' nav-dropdown--open' : ''}`}>
             <div className="nav-dropdown-trigger">
-              <NavLink to="/episodes" className={`nav-dropdown-label${episodesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Episodes</NavLink>
+              <NavLink to="/episodes" className={`nav-dropdown-label${episodesActive ? ' header-nav-link--active' : ''}`} onClick={e => { if (window.matchMedia('(max-width: 900px)').matches) { e.preventDefault(); setEpisodesOpen(o => !o) } else { setMenuOpen(false); setEpisodesOpen(false) } }}>Episodes</NavLink>
               <button type="button" className="nav-dropdown-caret" onClick={() => setEpisodesOpen(o => !o)} aria-expanded={episodesOpen} aria-label="Episodes menu">
                 <span aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
               </button>
@@ -489,7 +489,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
           {/* Studies dropdown */}
           <div ref={studiesDropdownRef} className={`nav-dropdown${studiesOpen ? ' nav-dropdown--open' : ''}`}>
             <div className="nav-dropdown-trigger">
-              <NavLink to="/study" className={`nav-dropdown-label${studiesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Studies</NavLink>
+              <NavLink to="/study" className={`nav-dropdown-label${studiesActive ? ' header-nav-link--active' : ''}`} onClick={e => { if (window.matchMedia('(max-width: 900px)').matches) { e.preventDefault(); setStudiesOpen(o => !o) } else { setMenuOpen(false); setStudiesOpen(false) } }}>Studies</NavLink>
               <button type="button" className="nav-dropdown-caret" onClick={() => setStudiesOpen(o => !o)} aria-expanded={studiesOpen} aria-label="Studies menu">
                 <span aria-hidden="true">{studiesOpen ? '▴' : '▾'}</span>
               </button>