fix(docs): close mobile sidebar pointer-events and slide it off-screen

The mobile drawer was only `visibility: hidden; opacity: 0` while
closed but stayed pinned at `top: 56px; left: 0; width: 280px`. iOS
Safari still delivered taps to the drawer's child links in that
state, so menu items inside the closed drawer fired even though the
drawer looked closed. Belt-and-braces fix: translateX(-100%) moves
the geometry off-screen and pointer-events: none turns off
hit-testing on the entire subtree.

Also unmounts the portaled toggle while the drawer is open so the
fixed button at top: 70px doesn't absorb taps meant for the drawer's
"APIs" / open child rows underneath, and bumps
baseline-browser-mapping to ^2.10.22 to silence the
"data is over two months old" warning from browserslist.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: hyochan

bun.lock

@@ -36,6 +36,7 @@
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "baseline-browser-mapping": "^2.10.22",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.7",

packages/docs/package.json

@@ -153,40 +153,44 @@ function Docs() {
   }, []);
 
   // Portal the sidebar toggle to document.body so it sits OUTSIDE any
-  // ancestor's stacking context. Several earlier rounds of "z-index 9001
-  // should beat the top nav's 100" still left the docs Menu button
-  // un-tappable on mobile WebKit because some ancestor of
-  // `.docs-container` (.main-content / .layout) was apparently painting
-  // its own stacking layer below the navigation. Rendering at body root
-  // makes the toggle a true top-level fixed element, immune to that.
-  const sidebarToggle = createPortal(
-    <button
-      type="button"
-      className={`docs-sidebar-toggle ${isSidebarOpen ? 'hidden' : ''} ${isScrolled ? 'scrolled' : ''}`}
-      onClick={(event) => {
-        event.stopPropagation();
-        setIsSidebarOpen((open) => !open);
-      }}
-      aria-label="Toggle sidebar"
-    >
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 5h14M3 10h14M3 15h14"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-        />
-      </svg>
-      <span>Menu</span>
-    </button>,
-    document.body
-  );
+  // ancestor's stacking context, AND fully unmount it while the drawer
+  // is open. Earlier rounds left the toggle in the DOM with
+  // `.hidden { opacity: 0; pointer-events: none }` while the drawer was
+  // open, which on iOS Safari still let the toggle absorb taps that
+  // landed on the drawer's first menu item ("APIs" header sits at
+  // y≈88-120px, exactly where the fixed toggle at top: 70px lives).
+  // Removing the element from the DOM entirely guarantees the drawer
+  // items underneath get every tap they should.
+  const sidebarToggle = isSidebarOpen
+    ? null
+    : createPortal(
+        <button
+          type="button"
+          className={`docs-sidebar-toggle ${isScrolled ? 'scrolled' : ''}`}
+          onClick={(event) => {
+            event.stopPropagation();
+            setIsSidebarOpen(true);
+          }}
+          aria-label="Toggle sidebar"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 5h14M3 10h14M3 15h14"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+          <span>Menu</span>
+        </button>,
+        document.body
+      );
 
   return (
     <div className="docs-container">

packages/docs/src/pages/docs/index.tsx

@@ -982,13 +982,22 @@
     background: var(--bg-secondary);
     z-index: 9000;
     transition:
+      transform 0.25s ease,
       opacity 0.2s ease,
       visibility 0.2s ease;
     border-right: 1px solid var(--border-color);
     padding: var(--spacing-xl) 0;
     box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    /* Closed state: slide fully off-screen, hide visually, AND disable
+       pointer events. iOS Safari has been observed to still deliver taps
+       to children of a `visibility: hidden; opacity: 0` fixed element,
+       so we belt-and-braces it: translateX moves the geometry out of the
+       hit-test area, and pointer-events: none turns off hit-testing for
+       this entire subtree even if the transform isn't honored. */
+    transform: translateX(-100%);
     opacity: 0;
     visibility: hidden;
+    pointer-events: none;
     overflow-y: auto;
     box-sizing: border-box;
   }
@@ -1000,8 +1009,10 @@
   }
 
   .docs-sidebar.open {
+    transform: translateX(0);
     opacity: 1;
     visibility: visible;
+    pointer-events: auto;
   }
 
   .docs-content {