Fix mobile doc-nav staying open when resizing up to desktop (#62456)

Author: Ebonsignori

src/frame/components/sidebar/SidebarCollapseContext.tsx

@@ -84,6 +84,21 @@ export function SidebarCollapseProvider({
     setMobileNavOpen(false)
   }, [asPath])
 
+  // Growing the viewport to the desktop (xxl) layout takes over from the inline
+  // mobile nav and hides its toggle, so close the mobile nav when we cross the
+  // breakpoint — otherwise its open state stays stuck and keeps the content
+  // column hidden. 1400px mirrors breakpoint-xxl.scss.
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia('(min-width: 1400px)')
+    const handle = (e: MediaQueryListEvent | MediaQueryList) => {
+      if (e.matches) setMobileNavOpen(false)
+    }
+    handle(mql) // close immediately if already at/above xxl on mount
+    mql.addEventListener('change', handle)
+    return () => mql.removeEventListener('change', handle)
+  }, [])
+
   const value = useMemo(
     () => ({
       collapsed,

src/frame/components/sidebar/SidebarNav.module.scss

@@ -11,9 +11,16 @@
 }
 
 // When the mobile nav is expanded inline, the rail spans the full width and
-// flows in the page (no fixed height / sticky) below the xxl breakpoint.
+// flows in the page (no fixed height / sticky) below the xxl breakpoint. At xxl
+// the desktop rail takes over, so revert to the fixed rail width even if the
+// mobile-open state is momentarily still set (e.g. mid-resize) — otherwise the
+// full-width rail covers the article content.
 .sidebarFullMobileOpen {
   width: 100%;
+
+  @include breakpoint-xxl {
+    width: 326px;
+  }
 }
 
 .sidebarContentFull {