github/open-resume
1
Fork 0
mirror of https://github.com/xitanggg/open-resume synced 2024-11-03 09:19:21 +01:00
Code Releases Activity

fix: jumping scrollbar on resume editor fix

Browse Source
This commit is contained in:
Divyaswor Makai 2024-10-16 23:19:06 +05:45 committed by Xitang Zhao
parent b5d3bc441b
commit e0a98cd3d1
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/ResumeForm/index.tsx
View File

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

2
src/app/resume-builder/page.tsx
View File

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