fix: reset template customisation scroll on screen change

[csiyang]

Summary by CodeRabbit

• Bug Fixes
  • Enhanced scroll behavior in multi-step form, automatically repositioning content and scrolling the app header into view when switching between form screens

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

NES-1189 Progress bar and step title hidden during step transitions

[coderabbitai]

Warning

Rate limit exceeded

@csiyang has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 26 minutes and 32 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 5014879 and 05fa09c.

📒 Files selected for processing (1)

• apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx

Walkthrough

Modifies the MultiStepForm component to add scroll position reset functionality triggered on active screen changes. Implements a useEffect hook with DOM manipulation to reset scroll position of the MainPanelBody container and attempt to scroll the app header into view using requestAnimationFrame. Adds a dynamic key prop to force component remount when the active screen changes.

Changes

Cohort / File(s)	Summary
MultiStepForm scroll reset logic apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx	Added useEffect hook triggered on activeScreen changes to reset scroll position of MainPanelBody element and scroll app-header into view. Introduced containerRef for main container reference. Added dynamic key prop (activeScreen) to inner Box to force re-render. Applied red border (2px solid) to container for visual purposes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat: customize page set up #7374: Directly modifies the same MultiStepForm component, introducing identical DOM scroll-reset logic and containerRef management patterns.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: reset template customisation scroll on screen change' directly matches the main change in the pull request, which adds scroll reset logic when the active screen changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch siyangcao/nes-1189-progress-bar-and-step-title-hidden-during-step-transitions

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 05fa09c

Command	Status	Duration	Result
nx run journeys-admin-e2e:e2e	✅ Succeeded	31s	View ↗
nx run-many --target=vercel-alias --projects=jo...	✅ Succeeded	2s	View ↗
nx run-many --target=upload-sourcemaps --projec...	✅ Succeeded	12s	View ↗
nx run-many --target=deploy --projects=journeys...	✅ Succeeded	2m 51s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-19 20:17:57 UTC

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx`:
- Around line 129-130: In the MultiStepForm component remove the debug border
styling so it is not shipped to users: locate the style object or JSX element in
MultiStepForm.tsx that contains "py: 10, border: '2px solid red'" and delete the
border property (or replace it with the intended production styling), then run
the UI to confirm spacing is unchanged; ensure no other leftover debug borders
remain in MultiStepForm or related style objects.

🧹 Nitpick comments (2)

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx (2)

78-78: Unused containerRef - remove or utilize it.

The containerRef is created and assigned to the Container element but is never used. The useEffect uses document.querySelector instead. Either leverage the ref directly (preferred) or remove it entirely.

♻️ Option 1: Remove unused ref

- import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+ import { ReactElement, useEffect, useMemo, useState } from 'react'

  const [activeScreen, setActiveScreen] =
    useState<CustomizationScreen>('language')
- const containerRef = useRef<HTMLDivElement>(null)

  <Container
-   ref={containerRef}
    maxWidth="sm"

♻️ Option 2: Use ref instead of querySelector (preferred)

If you need a ref for future functionality, consider using it in the scroll logic instead of relying on document.querySelector with test IDs.

Also applies to: 120-120

---

163-173: Key-based remount may be redundant with scroll reset.

Adding key={activeScreen} forces a full remount of the Box and its children on every screen change. While this is a valid pattern, consider:

1. The useEffect already handles scroll reset—do you also need the remount?
2. Remounting destroys any internal state in child screens (form inputs, focus, animations).
3. If the child screens are already designed to reset on prop changes, the key is unnecessary overhead.

If the intent is purely visual reset, the scroll useEffect should suffice. If it's to reset child component state, the key approach is valid but document the intent with a comment.

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Tue Jan 20 09:14:50 NZDT 2026