From e0a98cd3d16697fb505afcf07b3b72d6c9d718bc Mon Sep 17 00:00:00 2001
From: Divyaswor Makai <makaidivya@gmail.com>
Date: Wed, 16 Oct 2024 23:19:06 +0545
Subject: [PATCH] fix: jumping scrollbar on resume editor fix

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

diff --git a/src/app/components/ResumeForm/index.tsx b/src/app/components/ResumeForm/index.tsx
index 9be0af7..d17d60b 100644
--- a/src/app/components/ResumeForm/index.tsx
+++ b/src/app/components/ResumeForm/index.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { useState } from "react";
 import {
   useAppSelector,
   useSaveStateToLocalStorageOnChange,
@@ -29,17 +28,17 @@ export const ResumeForm = () => {
   useSaveStateToLocalStorageOnChange();
 
   const formsOrder = useAppSelector(selectFormsOrder);
-  const [isHover, setIsHover] = useState(false);
 
   return (
-    <div
-      className={cx(
-        "flex justify-center scrollbar scrollbar-track-gray-100 scrollbar-w-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end md:overflow-y-scroll",
-        isHover && "scrollbar-thumb-gray-200"
+      <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",
       )}
-      onMouseOver={() => setIsHover(true)}
-      onMouseLeave={() => setIsHover(false)}
     >
+      <div className="absolute top-0 bottom-0 right-0 w-3 bg-gray-200">
+      </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 f8dd0cb..725cd8c 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">
+          <div className="col-span-3 relative">
             <ResumeForm />
           </div>
           <div className="col-span-3">