fix: jumping scrollbar on resume editor fix

xitanggg · Oct 29, 2024 · e0a98cd · e0a98cd
1 parent b5d3bc4
commit e0a98cd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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">