From 59bb6dc4bd6702617174006e6f6e614332990eeb Mon Sep 17 00:00:00 2001
From: Safira Nugroho <safiranugroho@gmail.com>
Date: Sat, 18 Mar 2023 23:46:21 +1100
Subject: [PATCH 1/4] add padding/margin right for top nav items + separator

---
 beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx | 4 ++--
 beta/src/components/Layout/TopNav/TopNav.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index b8db801c667..ff51a22c8e3 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -148,12 +148,12 @@ export function SidebarRouteTree({
                 {index !== 0 && (
                   <li
                     role="separator"
-                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 ml-5 xs:mx-5 border-b border-border dark:border-border-dark"
                   />
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold ml-5 xs:mx-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index 10024dd11fc..ef7c8536644 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -302,7 +302,7 @@ export default function TopNav({
                 className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="pl-3 xs:pl-5 xs:gap-0.5 xs:text-base overflow-x-scroll flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="pl-3 xs:px-5 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
@@ -322,7 +322,7 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="ml-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="ml-5 xs:mx-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.

From b688e6d0a1cd666efd25bf654dff697223a6b6bb Mon Sep 17 00:00:00 2001
From: Safira Nugroho <safiranugroho@gmail.com>
Date: Sun, 19 Mar 2023 00:31:20 +1100
Subject: [PATCH 2/4] use overflow-y: overlay

---
 .../src/components/Layout/Sidebar/SidebarRouteTree.tsx |  4 ++--
 beta/src/components/Layout/SidebarNav/SidebarNav.tsx   |  2 +-
 beta/src/components/Layout/TopNav/TopNav.tsx           |  6 +++---
 beta/src/styles/index.css                              | 10 ++++++++++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index ff51a22c8e3..4ec783cfda5 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -148,12 +148,12 @@ export function SidebarRouteTree({
                 {index !== 0 && (
                   <li
                     role="separator"
-                    className="mt-4 mb-2 ml-5 xs:mx-5 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 mx-5 sm:mr-0 border-b border-border dark:border-border-dark"
                   />
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 xs:mx-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold mx-5 sm:mr-0 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/beta/src/components/Layout/SidebarNav/SidebarNav.tsx b/beta/src/components/Layout/SidebarNav/SidebarNav.tsx
index 7e242319c16..e38cc2a864e 100644
--- a/beta/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/beta/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -31,7 +31,7 @@ export default function SidebarNav({
 
   return (
     <div className={cn('sticky top-0 lg:bottom-0 lg:h-screen flex flex-col')}>
-      <div className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+      <div className="overflow-y-overlay no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
         <aside
           className={cn(
             `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index ef7c8536644..7b34da39317 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -290,7 +290,7 @@ export default function TopNav({
         {isOpen && (
           <div
             ref={scrollParentRef}
-            className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+            className="overflow-y-overlay no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
             <aside
               className={cn(
                 `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
@@ -302,7 +302,7 @@ export default function TopNav({
                 className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="pl-3 xs:px-5 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="px-5 sm:pl-3 sm:pr-0 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
@@ -322,7 +322,7 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="ml-5 xs:mx-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="mx-5 sm:mr-0 mt-4 mb-2 border-b border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index c7cc1ab7f6f..74dcf803d90 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -224,6 +224,16 @@
   html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
     background-color: rgba(255, 255, 255, 0.35) !important;
   }
+
+  /*
+  * 'overlay' is a deprecated value, but works with the .no-bg-scrollbar solution
+  * so the scrollbar width doesn't offset the containing element's width.
+  * We can go back to using 'scroll' when .no-bg-scrollbar is no longer needed.
+  */
+  html .overflow-y-overlay {
+    overflow-y: scroll; /* For Firefox. */
+    overflow-y: overlay; /* For WebKit-based browsers. */
+  }
 }
 
 .code-step * {

From 957bafe0337d3bec73b6fb89c3d86bd7b9afebe3 Mon Sep 17 00:00:00 2001
From: Safira Nugroho <safiranugroho@gmail.com>
Date: Sun, 19 Mar 2023 00:48:58 +1100
Subject: [PATCH 3/4] set breakpoint to lg

---
 beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx | 4 ++--
 beta/src/components/Layout/TopNav/TopNav.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 4ec783cfda5..682f9931ef3 100644
--- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -148,12 +148,12 @@ export function SidebarRouteTree({
                 {index !== 0 && (
                   <li
                     role="separator"
-                    className="mt-4 mb-2 mx-5 sm:mr-0 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 mx-5 lg:mr-0 border-b border-border dark:border-border-dark"
                   />
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold mx-5 sm:mr-0 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold mx-5 lg:mr-0 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index 7b34da39317..a320d05bcfc 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -302,7 +302,7 @@ export default function TopNav({
                 className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="px-5 sm:pl-3 sm:pr-0 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="px-5 lg:pl-3 lg:pr-0 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
@@ -322,7 +322,7 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="mx-5 sm:mr-0 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="mx-5 lg:mr-0 mt-4 mb-2 border-b border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.

From ab6a880eb5896c418f03391682f29fca0c4deeda Mon Sep 17 00:00:00 2001
From: Safira Nugroho <safiranugroho@gmail.com>
Date: Sun, 19 Mar 2023 01:58:02 +1100
Subject: [PATCH 4/4] *

---
 beta/src/styles/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 74dcf803d90..4d9ae94c250 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -186,6 +186,7 @@
   html.dark .no-bg-scrollbar {
     scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
   }
+
   /*
    * Until then, we have ... this.
    * If you're changing this, make sure you've tested: