From 5014879e6b197fa8c4ebb9cf4479445ffdfea34f Mon Sep 17 00:00:00 2001
From: Siyang <csiyang@yahoo.co.nz>
Date: Mon, 19 Jan 2026 03:59:08 +0000
Subject: [PATCH 1/3] reset scroll

---
 .../MultiStepForm/MultiStepForm.tsx           | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 22693860eeb..09a1d180b3a 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -4,7 +4,7 @@ import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
 import NextLink from 'next/link'
 import { useTranslation } from 'next-i18next'
-import { ReactElement, useMemo, useState } from 'react'
+import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useJourney } from '@core/journeys/ui/JourneyProvider'
 import Edit3 from '@core/shared/ui/icons/Edit3'
@@ -75,6 +75,31 @@ export function MultiStepForm(): ReactElement {
 
   const [activeScreen, setActiveScreen] =
     useState<CustomizationScreen>('language')
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Reset scroll position when screen changes.
+  // The scroll container (MainPanelBody) persists across screen changes, so we need to manually reset it.
+  useEffect(() => {
+    // Use requestAnimationFrame to ensure this runs after React has finished rendering
+    requestAnimationFrame(() => {
+      // Find the scroll container (MainPanelBody)
+      const scrollContainer = document.querySelector<HTMLElement>(
+        '[data-testid="MainPanelBody"]'
+      )
+      if (scrollContainer != null) {
+        // Reset scroll to top
+        scrollContainer.scrollTop = 0
+      }
+
+      // Also try to scroll the app header into view (if it exists) to ensure it's visible
+      const appHeader = document.querySelector<HTMLElement>('#app-header')
+      if (appHeader != null) {
+        requestAnimationFrame(() => {
+          appHeader.scrollIntoView({ block: 'start', behavior: 'instant' })
+        })
+      }
+    })
+  }, [activeScreen])
 
   async function handleNext(): Promise<void> {
     if (activeScreen !== screens[screens.length - 1]) {
@@ -92,6 +117,7 @@ export function MultiStepForm(): ReactElement {
 
   return (
     <Container
+      ref={containerRef}
       maxWidth="sm"
       sx={{
         width: '100%',
@@ -100,7 +126,8 @@ export function MultiStepForm(): ReactElement {
         borderRadius: { xs: '0px', sm: '16px' },
         mt: { xs: 0, sm: 6 },
         mb: { xs: 0, sm: 6 },
-        py: 10
+        py: 10,
+        border: '2px solid red'
       }}
     >
       <Stack gap={{ xs: 6, sm: 6 }} data-testid="MultiStepForm">
@@ -134,6 +161,7 @@ export function MultiStepForm(): ReactElement {
         )}
 
         <Box
+          key={activeScreen}
           sx={{
             alignSelf: 'center',
             width: '100%',

From 6dbbce788f1a840e7fe320feb8885fef42238302 Mon Sep 17 00:00:00 2001
From: Siyang <csiyang@yahoo.co.nz>
Date: Mon, 19 Jan 2026 20:06:00 +0000
Subject: [PATCH 2/3] remove debug border

---
 .../TemplateCustomization/MultiStepForm/MultiStepForm.tsx      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 09a1d180b3a..285558c66a8 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -126,8 +126,7 @@ export function MultiStepForm(): ReactElement {
         borderRadius: { xs: '0px', sm: '16px' },
         mt: { xs: 0, sm: 6 },
         mb: { xs: 0, sm: 6 },
-        py: 10,
-        border: '2px solid red'
+        py: 10
       }}
     >
       <Stack gap={{ xs: 6, sm: 6 }} data-testid="MultiStepForm">

From 05fa09c2d37e62e44f85c9c4825e6997a2504d46 Mon Sep 17 00:00:00 2001
From: Siyang <csiyang@yahoo.co.nz>
Date: Mon, 19 Jan 2026 20:07:38 +0000
Subject: [PATCH 3/3] refactor comment

---
 .../TemplateCustomization/MultiStepForm/MultiStepForm.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
index 285558c66a8..02f1c2b4d6f 100644
--- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
+++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
@@ -77,21 +77,17 @@ export function MultiStepForm(): ReactElement {
     useState<CustomizationScreen>('language')
   const containerRef = useRef<HTMLDivElement>(null)
 
-  // Reset scroll position when screen changes.
-  // The scroll container (MainPanelBody) persists across screen changes, so we need to manually reset it.
+  // Because of how react renders the screens, the scroll position is not reset when the screen changes.
+  // This is a workaround to reset the scroll position when the screen changes.
   useEffect(() => {
-    // Use requestAnimationFrame to ensure this runs after React has finished rendering
     requestAnimationFrame(() => {
-      // Find the scroll container (MainPanelBody)
       const scrollContainer = document.querySelector<HTMLElement>(
         '[data-testid="MainPanelBody"]'
       )
       if (scrollContainer != null) {
-        // Reset scroll to top
         scrollContainer.scrollTop = 0
       }
 
-      // Also try to scroll the app header into view (if it exists) to ensure it's visible
       const appHeader = document.querySelector<HTMLElement>('#app-header')
       if (appHeader != null) {
         requestAnimationFrame(() => {