From f310ec053d4e45baefe1521b4866b2d653ebdc4f Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 09:17:09 -0500
Subject: [PATCH 01/10] fix: fix overflow for sidebar layout

---
 src/layouts/SidebarLayout.res | 70 +++++++++++++++++------------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 301f62b41..1cc67981a 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -366,43 +366,41 @@ let make = (
     }
   | None => React.null
   }
-
-  <div className={"mt-16 min-w-320 " ++ theme}>
-    <div className="w-full">
-      <div className="flex lg:justify-center">
-        <div className="flex w-full max-w-1280 md:mx-10 md:mt-16">
-          sidebar
-          <main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
-            //width of the right content part
-            <div
-              id="mobile-navbar"
-              className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
-                  ? "top-28"
-                  : "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0 z-25`}
-            >
-              <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
-              <div
-                className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full"
-              >
-                breadcrumbs
-                editLinkEl
-              </div>
-            </div>
-            <div
-              className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
-              dataTestId="side-layout-children"
-            >
-              children
-            </div>
-            pagination
-          </main>
-          {switch rightSidebar {
-          | Some(ele) => ele
-          | None => React.null
-          }}
+  <>
+    <div
+      className={"w-full mt-16 min-w-320 grid lg:justify-center max-w-1280 md:mx-10 md:mt-16 grid-cols-[auto_minmax(0px,1fr)] " ++
+      theme}
+    >
+      sidebar
+      <main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
+        //width of the right content part
+        <div
+          id="mobile-navbar"
+          className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
+              ? "top-28"
+              : "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0 z-25`}
+        >
+          <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
+          <div
+            className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full"
+          >
+            breadcrumbs
+            editLinkEl
+          </div>
         </div>
-      </div>
+        <div
+          className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
+          dataTestId="side-layout-children"
+        >
+          children
+        </div>
+        pagination
+      </main>
+      {switch rightSidebar {
+      | Some(ele) => ele
+      | None => React.null
+      }}
     </div>
     <Footer />
-  </div>
+  </>
 }

From 749171d5868723f53720a915af0b30fe5d903334 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 10:04:47 -0500
Subject: [PATCH 02/10] fix

---
 src/layouts/SidebarLayout.res | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index c699ee4b5..8947809e4 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -368,11 +368,11 @@ let make = (
   }
   <>
     <div
-      className={"w-full mt-16 min-w-320 grid lg:justify-center max-w-1280 md:mx-10 md:mt-16 grid-cols-[auto_minmax(0px,1fr)] " ++
+      className={"w-full mt-16 min-w-320 grid lg:justify-center max-w-1280 md:mx-10 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] " ++
       theme}
     >
       sidebar
-      <main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
+      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
         //width of the right content part
         <div
           id="mobile-navbar"

From 272310c7ec30252cffa3f4a3fdb5a71ac41a2a0d Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 10:51:24 -0500
Subject: [PATCH 03/10] tidying up

---
 src/layouts/SidebarLayout.res | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 8947809e4..8c69b780d 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -180,7 +180,7 @@ module Sidebar = {
       >
         <aside
           id="sidebar-content"
-          className="h-full relative top-0 px-4 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
+          className="h-full relative top-0 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
         >
           <button
             onClick={evt => {
@@ -368,17 +368,18 @@ let make = (
   }
   <>
     <div
-      className={"w-full mt-16 min-w-320 grid lg:justify-center max-w-1280 md:mx-10 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] " ++
+      className={"mt-16 min-w-320 grid max-w-1280 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] justify-items-center md:mx-10 md:px-4 lg:px-24 " ++
       theme}
     >
       sidebar
-      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
-        //width of the right content part
+      // md:max-w-576 lg:max-w-740
+      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32">
+        // width of the right content part
         <div
           id="mobile-navbar"
           className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
               ? "top-28"
-              : "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0 z-25`}
+              : "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:translate-y-0 z-25`}
         >
           <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
           <div

From 6d45f5cbe5465e8ce86ada0889fc6ad8d94f9bc5 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 10:53:18 -0500
Subject: [PATCH 04/10] mobile nav

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 8c69b780d..0c01e117e 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -180,7 +180,7 @@ module Sidebar = {
       >
         <aside
           id="sidebar-content"
-          className="h-full relative top-0 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
+          className="h-full relative top-0 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)] px-4 md:px-0"
         >
           <button
             onClick={evt => {

From 446ae4e4fff66f50a60bd24bd48d2eea4fea0769 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 11:06:49 -0500
Subject: [PATCH 05/10] keep inside of screen

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 0c01e117e..ece10030e 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -373,7 +373,7 @@ let make = (
     >
       sidebar
       // md:max-w-576 lg:max-w-740
-      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32">
+      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32 max-w-svw">
         // width of the right content part
         <div
           id="mobile-navbar"

From 21fc41c9f6a87844afc27d319569eb0a9531c8ac Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 12:03:55 -0500
Subject: [PATCH 06/10] tweak position

---
 src/layouts/SidebarLayout.res | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index ece10030e..fe32f98b7 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -176,7 +176,7 @@ module Sidebar = {
         id="sidebar"
         className={(
           isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
-        ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible pt-2 bg-white md:mt-0 min-w-48"}
+        ) ++ " md:block md:w-48 lg:w-1/5 h-auto md:relative overflow-y-visible pl-4 md:pl-0 pt-2 bg-white md:mt-0 min-w-48"}
       >
         <aside
           id="sidebar-content"
@@ -368,7 +368,7 @@ let make = (
   }
   <>
     <div
-      className={"mt-16 min-w-320 grid max-w-1280 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] justify-items-center md:mx-10 md:px-4 lg:px-24 " ++
+      className={"mt-16 min-w-320 grid max-w-1280 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] pr-4 lg:pr-24 m-auto " ++
       theme}
     >
       sidebar

From 5ea3ce9f699ced527bf5eb54eaacbbf0576c38ac Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Mon, 1 Dec 2025 13:10:38 -0500
Subject: [PATCH 07/10] one more sidebar tweak

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index fe32f98b7..c20f2c9ce 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -176,7 +176,7 @@ module Sidebar = {
         id="sidebar"
         className={(
           isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
-        ) ++ " md:block md:w-48 lg:w-1/5 h-auto md:relative overflow-y-visible pl-4 md:pl-0 pt-2 bg-white md:mt-0 min-w-48"}
+        ) ++ " md:block md:w-48 lg:w-1/5 h-auto md:relative overflow-y-visible px-4 md:pl-0 pt-2 bg-white md:mt-0 min-w-48"}
       >
         <aside
           id="sidebar-content"

From c5950092517e1cc3c6da6052b16b9ec50121bf2e Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Tue, 2 Dec 2025 11:32:32 -0500
Subject: [PATCH 08/10] style tweaks

---
 src/components/Navigation.res | 12 +++++++-----
 src/layouts/SidebarLayout.res | 18 +++++++-----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index 1078a4b97..8793e1a0f 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -110,7 +110,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
   <>
     <header
       id="header"
-      className={fixedNavClassName ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:-translate-y-0 min-w-[20rem]"}
+      className={fixedNavClassName ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:translate-y-0 min-w-[20rem]"}
     >
       <nav
         className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14"
@@ -121,7 +121,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             <Link.String
               prefetch={#intent}
               to="/"
-              className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold"
+              className="hover:cursor-pointer w-full h-full flex justify-center items-center font-bold"
             >
               <img src="/brand/rescript-brandmark.svg" className="lg:hidden" />
               <img src="/brand/rescript-logo.svg" className="hidden lg:block" />
@@ -213,7 +213,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           id="mobile-overlay"
           className={(
             isOverlayOpen ? "flex" : "hidden"
-          ) ++ " top-16 sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}
+          ) ++ " top-16 flex-col fixed left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}
         >
           <MobileNav route />
         </div>
@@ -222,9 +222,11 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
       {isDocRoute(~route)
         ? <nav
             id="doc-navbar"
-            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:translate-y-0"
+            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-11 sm:text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:translate-y-0"
           >
-            <div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
+            <div
+              className="overflow-x-scroll flex gap-4 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto"
+            >
               <Link
                 prefetch=#intent
                 to=#"/docs/manual/introduction"
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index c20f2c9ce..326259c36 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -79,7 +79,7 @@ module Sidebar = {
         {Array.map(items, m => {
           let hidden = isHidden ? "hidden" : "block"
           let active = isItemActive(m)
-            ? ` bg-fire-5 text-red-500 leading-5 -ml-2 pl-2 font-medium block hover:bg-fire-70 `
+            ? ` bg-fire-5 text-red-500 leading-5 pl-2 font-medium block hover:bg-fire-70 `
             : ""
 
           let activeToc = switch getActiveToc {
@@ -91,7 +91,7 @@ module Sidebar = {
             <Link.String
               to=m.href
               prefetch={#intent}
-              className={"block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 " ++
+              className={"block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20" ++
               active}
             >
               {React.string(m.name)}
@@ -170,17 +170,14 @@ module Sidebar = {
 
     <>
       <div
-        style={{
-          paddingTop: `${sidebarTopOffset->Int.toString}px`,
-        }}
         id="sidebar"
         className={(
-          isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
-        ) ++ " md:block md:w-48 lg:w-1/5 h-auto md:relative overflow-y-visible px-4 md:pl-0 pt-2 bg-white md:mt-0 min-w-48"}
+          isOpen ? "fixed left-0 h-full z-20 " : "hidden"
+        ) ++ " min-w-3xs max-w-3xs lg:max-w-xs md:block h-auto md:relative overflow-y-visible px-4 md:pl-0 pt-2 bg-white md:mt-0"}
       >
         <aside
           id="sidebar-content"
-          className="h-full relative top-0 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)] px-4 md:px-0"
+          className="h-full relative top-0 block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)] px-4"
         >
           <button
             onClick={evt => {
@@ -372,14 +369,13 @@ let make = (
       theme}
     >
       sidebar
-      // md:max-w-576 lg:max-w-740
-      <main className="px-4 pt-4 md:pl-16 lg:mr-8 mb-32 max-w-svw">
+      <main className="px-4 md:px-0 md:pt-4 lg:px-4 lg:pl-16 lg:mr-8 mb-32 max-w-svw">
         // width of the right content part
         <div
           id="mobile-navbar"
           className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
               ? "top-28"
-              : "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:translate-y-0 z-25`}
+              : "top-16"} left-0 pl-4 bg-white w-full py-4 lg:relative lg:border-none lg:shadow-none lg:p-0 lg:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 lg:group-[.nav-disappear]:translate-y-0 z-25`}
         >
           <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
           <div

From d3ecaebf9a6e67bc0562d7f9b026278fd2068d43 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Tue, 2 Dec 2025 11:38:24 -0500
Subject: [PATCH 09/10] remove dead code

---
 src/layouts/SidebarLayout.res | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 326259c36..d672f964b 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -143,23 +143,6 @@ module Sidebar = {
   ) => {
     let isItemActive = (navItem: NavItem.t) => navItem.href === (route :> string)
 
-    // the height of the navbars above is fluid across pages, and it's easy to get it wrong
-    // so we calculate it dynamically here
-    let sidebarTopOffset = isOpen
-      ? {
-          let mobileNavbarHeight =
-            Nullable.make(document->WebAPI.Document.getElementById("mobile-navbar"))
-            ->Nullable.map(el => el.clientHeight)
-            ->Nullable.getOr(0)
-          let docNavbarHeight =
-            Nullable.make(document->WebAPI.Document.getElementById("doc-navbar"))
-            ->Nullable.map(el => el.clientHeight)
-            ->Nullable.getOr(0)
-
-          mobileNavbarHeight + docNavbarHeight + 8
-        }
-      : 0
-
     let getActiveToc = (navItem: NavItem.t) => {
       if navItem.href === (route :> string) {
         activeToc

From a634c9e8517858e83168b45e11eec8187f10f4fa Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Tue, 2 Dec 2025 15:45:15 -0500
Subject: [PATCH 10/10] add back sm:hidden

---
 src/components/Navigation.res | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index 8793e1a0f..cb1c8de61 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -121,7 +121,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             <Link.String
               prefetch={#intent}
               to="/"
-              className="hover:cursor-pointer w-full h-full flex justify-center items-center font-bold"
+              className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold"
             >
               <img src="/brand/rescript-brandmark.svg" className="lg:hidden" />
               <img src="/brand/rescript-logo.svg" className="hidden lg:block" />
@@ -213,7 +213,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           id="mobile-overlay"
           className={(
             isOverlayOpen ? "flex" : "hidden"
-          ) ++ " top-16 flex-col fixed left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}
+          ) ++ " sm:hidden top-16 flex-col fixed left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}
         >
           <MobileNav route />
         </div>