style tweaks

Author: jderochervlk

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"

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