fix the scrollbar

components/mdx/PreWrapper.tsx

@@ -22,7 +22,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
   };
 
   return (
-    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative flat-scrollbar-normal">
       {hovered && (
         <button
           aria-label="Copy code"
@@ -60,7 +60,7 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
           </svg>
         </button>
       )}
-      <pre>{children}</pre>
+      <pre className="flat-scrollbar-normal">{children}</pre>
     </div>
   );
 };

pages/blog/[id].tsx

@@ -88,7 +88,7 @@ const ReaderPage = (props: ReaderPageProps) => {
               )}
             </div>
             <div
-              className={`typesetting ${fontSourceSerifScreenCN.className} flat-scrollbar-thin my-0 ${
+              className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
                 !props.frontMatter.allowShare && "select-none"
               }`}
             >

styles/formulation.css

@@ -4,17 +4,20 @@
   padding-bottom: 10px;
 }
 
-.katex-display::-webkit-scrollbar {
-  width: 10px;
-  height: 5px;
-}
 .katex-display::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(207, 199, 199, 0.05);
-  -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.08);
+  background-color: transparent;
+  border-radius: 9999px;
 }
+
 .katex-display::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: rgb(232, 229, 229);
-  -webkit-box-shadow: inset 0 0 50px rgba(169, 160, 160, 0.2);
+  --tw-border-opacity: 1;
+  background-color: rgba(217, 217, 227, 0.5);
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 1px;
+}
+
+.katex-display::-webkit-scrollbar {
+  height: 0.4rem;
+  width: 0.5rem;
 }

styles/scrollbar.css

@@ -1,29 +1,17 @@
-.flat-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.flat-scrollbar::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
-}
-.flat-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: gray;
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+.flat-scrollbar-normal::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
 }
 
-.flat-scrollbar-thin::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
+.flat-scrollbar-normal::-webkit-scrollbar-thumb {
+  --tw-border-opacity: 1;
+  background-color: rgba(217, 217, 227, 0.5);
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 1px;
 }
-.flat-scrollbar-thin::-webkit-scrollbar-track {
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
-}
-.flat-scrollbar-thin::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: gray;
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+
+.flat-scrollbar-normal::-webkit-scrollbar {
+  height: 0.5rem;
+  width: 0.5rem;
 }