use custom scrollbar on all pages - avoids layout shifting on blog pages

src/app.css

@@ -209,7 +209,6 @@
   transition-duration: 500ms;
   syntax: "*";
   inherits: false;
-  scrollbar-color: var(--color-text) var(--color-base);
 }
 
 ::selection {
@@ -224,14 +223,6 @@
   background-color: var(--color-text);
   color: var(--color-crust);
 }
-#center-body {
-  scrollbar-width: thin;
-  scrollbar-gutter: stable both-edges;
-}
-#center-body:has(.blog-overide) {
-  scrollbar-width: none !important;
-  scrollbar-gutter: unset !important;
-}
 #rightbar-content {
   scrollbar-width: none;
 }

src/app.tsx

@@ -16,6 +16,7 @@ import { BarsProvider, useBars } from "./context/bars";
 import { DarkModeProvider } from "./context/darkMode";
 import { createWindowWidth, isMobile } from "~/lib/resize-utils";
 import { MOBILE_CONFIG } from "./config";
+import CustomScrollbar from "./components/CustomScrollbar";
 
 function AppLayout(props: { children: any }) {
   const {
@@ -167,7 +168,13 @@ function AppLayout(props: { children: any }) {
               onTouchEnd={handleCenterTapRelease}
             >
               <Suspense fallback={<TerminalSplash />}>
+                <CustomScrollbar
+                  autoHide={true}
+                  autoHideDelay={1500}
+                  rightOffset={250}
+                >
                   {props.children}
+                </CustomScrollbar>
               </Suspense>
             </div>
           </ErrorBoundary>

src/routes/blog/[title]/index.tsx

@@ -286,7 +286,6 @@ export default function PostPage() {
   };
 
   return (
-    <CustomScrollbar autoHide={true} autoHideDelay={1500} rightOffset={250}>
     <Show
       when={data()}
       fallback={
@@ -479,6 +478,5 @@ export default function PostPage() {
         );
       }}
     </Show>
-    </CustomScrollbar>
   );
 }