From 68d72daa90029b6f231ae82ad886138a213fa21f Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Thu, 18 Sep 2025 18:26:06 +0530
Subject: [PATCH] [WEB-4964] fix: update onboarding layout and enhance scroll
 behavior (#7825)

* [WEB-4964] fix: update onboarding layout and enhance scroll behavior
---
 apps/web/core/components/onboarding/root.tsx  |  4 ++--
 .../core/components/onboarding/steps/root.tsx | 21 ++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/web/core/components/onboarding/root.tsx b/apps/web/core/components/onboarding/root.tsx
index 8d5679d73..0aa968720 100644
--- a/apps/web/core/components/onboarding/root.tsx
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -132,7 +132,7 @@ export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
   }, []);
 
   return (
-    <>
+    <div className="flex flex-col h-full">
       {/* Header with progress */}
       <OnboardingHeader
         currentStep={currentStep}
@@ -142,6 +142,6 @@ export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
 
       {/* Main content area */}
       <OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} />
-    </>
+    </div>
   );
 });
diff --git a/apps/web/core/components/onboarding/steps/root.tsx b/apps/web/core/components/onboarding/steps/root.tsx
index a1f331998..0ea7e77dd 100644
--- a/apps/web/core/components/onboarding/steps/root.tsx
+++ b/apps/web/core/components/onboarding/steps/root.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useMemo } from "react";
+import { FC, useEffect, useMemo, useRef } from "react";
 // plane imports
 import { EOnboardingSteps, IWorkspaceMemberInvitation } from "@plane/types";
 // local components
@@ -18,6 +18,19 @@ type Props = {
 
 export const OnboardingStepRoot: FC<Props> = (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
   const stepComponents = useMemo(
     () => ({
@@ -33,8 +46,10 @@ export const OnboardingStepRoot: FC<Props> = (props) => {
   );
 
   return (
-    <div className="flex-1 flex items-center justify-center p-8">
-      <div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-full p-8">
+        <div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
+      </div>
     </div>
   );
 };