vhad/plane
1
0
Fork 0
mirror of https://github.com/gosticks/plane.git synced 2025-10-16 12:45:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[WEB-4964] fix: update onboarding layout and enhance scroll behavior (#7825)

Browse Source 
* [WEB-4964] fix: update onboarding layout and enhance scroll behavior
This commit is contained in:
Prateek Shourya 2025-09-18 18:26:06 +05:30 committed by GitHub
parent 365d2d902c
commit 68d72daa90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/core/components/onboarding/root.tsx
View File

@ -132,7 +132,7 @@ export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
}, []); }, []);
return ( return (
<> <div className="flex flex-col h-full">
{/* Header with progress */} {/* Header with progress */}
<OnboardingHeader <OnboardingHeader
currentStep={currentStep} currentStep={currentStep}
@ -142,6 +142,6 @@ export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
{/* Main content area */} {/* Main content area */}
<OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} /> <OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} />
</> </div>
); );
}); });

21
apps/web/core/components/onboarding/steps/root.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { FC, useMemo } from "react"; import { FC, useEffect, useMemo, useRef } from "react";
// plane imports // plane imports
import { EOnboardingSteps, IWorkspaceMemberInvitation } from "@plane/types"; import { EOnboardingSteps, IWorkspaceMemberInvitation } from "@plane/types";
// local components // local components
@ -18,6 +18,19 @@ type Props = {
export const OnboardingStepRoot: FC<Props> = (props) => { export const OnboardingStepRoot: FC<Props> = (props) => {
const { currentStep, invitations, handleStepChange } = props; const { currentStep, invitations, handleStepChange } = props;
// ref for the scrollable container
const scrollContainerRef = useRef<HTMLDivElement>(null);
// scroll to top when step changes
useEffect(() => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollTo({
top: 0,
behavior: "smooth",
});
}
}, [currentStep]);
// memoized step component mapping // memoized step component mapping
const stepComponents = useMemo( const stepComponents = useMemo(
() => ({ () => ({
@ -33,8 +46,10 @@ export const OnboardingStepRoot: FC<Props> = (props) => {
); );
return ( return (
<div className="flex-1 flex items-center justify-center p-8"> <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
<div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div> <div className="flex items-center justify-center min-h-full p-8">
<div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
</div>
</div> </div>
); );
}; };