Revert some changes and give scrollbar-thumb a default color

Author: xitanggg

src/app/components/ResumeForm/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useState } from "react";
 import {
   useAppSelector,
   useSaveStateToLocalStorageOnChange,
@@ -28,17 +29,17 @@ export const ResumeForm = () => {
   useSaveStateToLocalStorageOnChange();
 
   const formsOrder = useAppSelector(selectFormsOrder);
+  const [isHover, setIsHover] = useState(false);
 
   return (
-      <div
-        className={cx(
-          "flex justify-center md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end md:overflow-y-scroll",
-          "scrollbar-thumb-gray-200",
+    <div
+      className={cx(
+        "flex justify-center scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-100 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end md:overflow-y-scroll",
+        isHover && "!scrollbar-thumb-gray-200"
       )}
+      onMouseOver={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
     >
-      <div className="hidden md:block absolute top-0 bottom-0 right-0 w-3 bg-gray-100">
-      </div>
-      
       <section className="flex max-w-2xl flex-col gap-8 p-[var(--resume-padding)]">
         <ProfileForm />
         {formsOrder.map((form) => {

src/app/resume-builder/page.tsx

@@ -9,7 +9,7 @@ export default function Create() {
     <Provider store={store}>
       <main className="relative h-full w-full overflow-hidden bg-gray-50">
         <div className="grid grid-cols-3 md:grid-cols-6">
-          <div className="col-span-3 relative">
+          <div className="col-span-3">
             <ResumeForm />
           </div>
           <div className="col-span-3">