fix hidden scrollbars

this was an adventure

src/pages/index.jsx

@@ -163,13 +163,6 @@ function Home({ initialSettings }) {
   const { data: bookmarks } = useSWR("/api/bookmarks");
   const { data: widgets } = useSWR("/api/widgets");
 
-  const wrappedStyle = {};
-  if (initialSettings && initialSettings.background) {
-    wrappedStyle.backgroundImage = `url(${initialSettings.background})`;
-    wrappedStyle.backgroundSize = "cover";
-    wrappedStyle.opacity = initialSettings.backgroundOpacity ?? 1;
-  }
-
   useEffect(() => {
     if (settings.language) {
       i18n.changeLanguage(settings.language);
@@ -191,7 +184,6 @@ function Home({ initialSettings }) {
         {initialSettings.base && <base href={initialSettings.base} />}
         {initialSettings.favicon && <link rel="icon" href={initialSettings.favicon} />}
       </Head>
-      <div className="fixed w-screen h-screen m-0 p-0 z-0 pointer-events-none" style={wrappedStyle} />
       <div className="relative container m-auto flex flex-col justify-between z-10">
         <div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
           {widgets && (
@@ -244,11 +236,27 @@ function Home({ initialSettings }) {
 }
 
 export default function Wrapper({ initialSettings, fallback }) {
+  const wrappedStyle = {};
+  if (initialSettings && initialSettings.background) {
+    // wrappedStyle.backgroundImage = `url(${initialSettings.background})`;
+    // wrappedStyle.backgroundSize = "cover";
+    const opacity = initialSettings.backgroundOpacity ?? 1;
+    const opacityValue = 1 - opacity;
+    wrappedStyle.backgroundImage = `
+      linear-gradient(
+        rgb(var(--bg-color) / ${opacityValue}),
+        rgb(var(--bg-color) / ${opacityValue})
+      ),
+      url(${initialSettings.background})`;
+    wrappedStyle.backgroundPosition = "center";
+    wrappedStyle.backgroundSize = "cover";
+  }
+
   return (
     <div
       id="page_wrapper"
       className={classNames(
-        "relative w-full h-full",
+        "relative",
         initialSettings.theme && initialSettings.theme,
         initialSettings.color && `theme-${initialSettings.color}`
       )}
@@ -256,6 +264,7 @@ export default function Wrapper({ initialSettings, fallback }) {
       <div
         id="page_container"
         className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
+        style={wrappedStyle}
       >
         <Index initialSettings={initialSettings} fallback={fallback} />
       </div>

src/styles/globals.css

@@ -20,39 +20,35 @@ body {
   height: 100vh;
   margin: 0;
   padding: 0;
-  overflow: overlay;
-}
-
-.light #page_container {
-  scrollbar-color: rgb(var(--color-300)) rgb(var(--color-200));
-}
-
-.dark #page_container {
-  scrollbar-color: rgb(var(--color-600)) rgb(var(--color-700));
 }
 
-.light ::-webkit-scrollbar {
-  width: 0.75em;
+.light {
+  --bg-color: var(--color-50);
+  --scrollbar-thumb: rgb(var(--color-300));
+  --scrollbar-track: rgb(var(--color-200));
 }
 
-.light ::-webkit-scrollbar-track {
-  background-color: rgb(var(--color-200));
+.dark {
+  --bg-color: var(--color-800);
+  --scrollbar-thumb: rgb(var(--color-600));
+  --scrollbar-track: rgb(var(--color-700));
 }
 
-.light ::-webkit-scrollbar-thumb {
-  background-color: rgb(var(--color-300));
-  border-radius: 0.25em;
+#page_container {
+  overflow: auto;
+  overflow: overlay;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
-.dark ::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 0.75em;
 }
 
-.dark ::-webkit-scrollbar-track {
-  background-color: rgb(var(--color-700));
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-track);
 }
 
-.dark ::-webkit-scrollbar-thumb {
-  background-color: rgb(var(--color-600));
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
   border-radius: 0.25em;
 }