added dedicated style for overflow: hidden on body

src/components/navigation/sidebars/nav/index.tsx

@@ -57,10 +57,11 @@ const NavComponent: Component<NavProps> = props => {
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.style.overflow = "hidden";
+      document.body.classList.add("overflow-nav");
       document.body.classList.add("dim-content-nav");
     } else {
       window.removeEventListener("click", handleClickOutside);
-      document.body.style.overflow = "auto";
+      document.body.classList.remove("overflow-nav");
       document.body.classList.remove("dim-content-nav");
     }
   });

src/components/navigation/sidebars/toc/index.tsx

@@ -49,11 +49,12 @@ const TableOfContents: Component<TOCProps> = props => {
   createEffect(() => {
     if (open()) {
       window.addEventListener("click", handleClickOutside);
-      document.body.style.overflow = "hidden";
+      document.body.classList.add("overflow-toc");
       document.body.classList.add("dim-content-toc");
     } else {
       window.removeEventListener("click", handleClickOutside);
       document.body.style.overflow = "auto";
+      document.body.classList.remove("overflow-toc");
       document.body.classList.remove("dim-content-toc");
     }
   });

src/styles/global.css

@@ -56,6 +56,11 @@ html.dark {
   all: unset;
 }
 
+.overflow-nav,
+.overflow-toc {
+  overflow: hidden;
+}
+
 .search {
   display: none;
 }
@@ -133,12 +138,10 @@ footer {
     left: -1rem;
     height: 1px;
     width: calc(100% + 1rem);
-    background: linear-gradient(
-      90deg,
+    background: linear-gradient(90deg,
         transparent 0%,
         hsl(var(--footer-bkg-border)) 50%,
-      transparent 100%
-    );
+        transparent 100%);
   }
 
   & a {
@@ -177,12 +180,12 @@ footer {
     gap: 0.127rem;
     color: hsl(var(--text-dark));
 
-    & > p {
+    &>p {
       margin-bottom: 0.2rem;
       color: hsl(0 0 40);
     }
 
-    & > a {
+    &>a {
       text-decoration: none;
     }
   }