use overflow-y: overlay

Author: safiranugroho

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}

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`

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.

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 * {