fix: header cls

src/components/layout/header/internal/HeaderWithShadow.tsx

@@ -15,7 +15,7 @@ export const HeaderWithShadow: Component = ({ children }) => {
     <header
       data-hide-print
       className={clsx(
-        'fixed left-0 right-0 top-0 z-[9] h-[4.5rem] overflow-hidden transition-shadow duration-200',
+        'fixed left-0 top-0 z-[9] h-[4.5rem] w-[calc(100vw-5px)] overflow-hidden transition-shadow duration-200',
         showShadow &&
           'shadow-none shadow-neutral-100 dark:shadow-neutral-800/50 lg:shadow-sm',
       )}

src/providers/root/modal-stack-provider.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react'
 import { AnimatePresence, m, useAnimationControls } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
-import { selectAtom } from 'jotai/utils'
 import type { Target, Transition } from 'framer-motion'
 import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
 
@@ -103,38 +102,10 @@ const ModalStack = () => {
       {stack.map((item, index) => {
         return <Modal key={item.id} item={item} index={index} />
       })}
-
-      {/* <HeaderPreventCLS /> */}
     </AnimatePresence>
   )
 }
 
-export const HeaderPreventCLS = () => {
-  const hasModal = useAtomValue(
-    useMemo(
-      () =>
-        selectAtom(modalStackAtom, (atom) => {
-          return atom.length > 0
-        }),
-      [],
-    ),
-  )
-
-  useEffect(() => {
-    if (!hasModal) return
-    /// 5px
-    const $header = document.querySelector('body > header') as HTMLElement
-    if (!$header) return
-
-    $header.style.right = '5px'
-    return () => {
-      $header.style.right = ''
-    }
-  }, [hasModal])
-
-  return null
-}
-
 const enterStyle: Target = {
   scale: 1,
   opacity: 1,

src/styles/scrollbar.css

@@ -1,45 +1,44 @@
 body::-webkit-scrollbar {
   height: 0;
-  width: 0;
 }
 
 body {
   overflow: overlay;
   /* scrollbar-gutter: stable; */
 }
-/**/
-/* [data-theme='dark'] { */
-/*   ::-webkit-scrollbar-thumb, */
-/*   ::-webkit-scrollbar-thumb:hover { */
-/*     border: 3px solid theme(colors.zinc.700/20); */
-/*   } */
-/**/
-/*   ::-webkit-scrollbar-thumb:hover { */
-/*     background: theme(colors.zinc.800/96); */
-/*   } */
-/* } */
-/**/
-/* ::-webkit-scrollbar-thumb, */
-/* ::-webkit-scrollbar-thumb:hover { */
-/*   background-color: transparent; */
-/*   border: 3px solid theme(colors.base-100); */
-/*   border-radius: 5px; */
-/* } */
-/**/
-/* ::-webkit-scrollbar { */
-/*   width: 5px !important; */
-/*   height: 5px !important; */
-/*   background: theme(colors.base-100); */
-/* } */
-/**/
-/* ::-webkit-scrollbar-thumb { */
-/*   background: theme(colors.neutral); */
-/* } */
-/**/
-/* ::-webkit-scrollbar-thumb:hover { */
-/*   background: theme(colors.neutral-focus); */
-/* } */
-/**/
-/* ::-webkit-scrollbar-corner { */
-/*   background: theme(colors.base-100); */
-/* } */
+
+[data-theme='dark'] {
+  ::-webkit-scrollbar-thumb,
+  ::-webkit-scrollbar-thumb:hover {
+    border: 3px solid theme(colors.zinc.700/20);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: theme(colors.zinc.800/96);
+  }
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover {
+  background-color: transparent;
+  border: 3px solid theme(colors.base-100);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 5px !important;
+  height: 5px !important;
+  background: theme(colors.base-100);
+}
+
+::-webkit-scrollbar-thumb {
+  background: theme(colors.neutral);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: theme(colors.neutral-focus);
+}
+
+::-webkit-scrollbar-corner {
+  background: theme(colors.base-100);
+}