From 1699cddea0d697a73aedce591756f8f74245e84d Mon Sep 17 00:00:00 2001
From: Xitang <xz522@cornell.edu>
Date: Tue, 29 Oct 2024 00:17:23 -0700
Subject: [PATCH] Revert some changes and give scrollbar-thumb a default color

---
 src/app/components/ResumeForm/index.tsx | 15 ++++++++-------
 src/app/resume-builder/page.tsx         |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/app/components/ResumeForm/index.tsx b/src/app/components/ResumeForm/index.tsx
index 31ab8e1..6cf270a 100644
--- a/src/app/components/ResumeForm/index.tsx
+++ b/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) => {
diff --git a/src/app/resume-builder/page.tsx b/src/app/resume-builder/page.tsx
index 725cd8c..f8dd0cb 100644
--- a/src/app/resume-builder/page.tsx
+++ b/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">