From 597f99647490c4c9a211d6c7aec22c0dc520a8ea Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Oct 2026 16:10:16 -0400
Subject: [PATCH] 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 |  2 +-
 src/App.css  | 15 ++++++++++++++-
 src/App.tsx  |  4 ++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c598e6b..3b9a9f1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.45.0",
+  "version": "2.45.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.css b/src/App.css
index 51f2ac2..812a780 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/App.tsx b/src/App.tsx
index b468633..02ca7c0 100644
--- a/src/App.tsx
+++ b/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>