From d467d5fa067c731c407382cfe4f54a898f19c64d Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Fri, 28 Nov 2025 11:09:43 +0100
Subject: [PATCH] scroll to top on stage change, fix progress layout

---
 frontend/frontend/src/components/Home/Progress.js |  2 +-
 frontend/frontend/src/pages/Home/Home.js          | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js
index 0a53112f..2504b172 100644
--- a/frontend/frontend/src/components/Home/Progress.js
+++ b/frontend/frontend/src/components/Home/Progress.js
@@ -24,7 +24,7 @@ const ProgressSection = ({ num, item, passed, isActive, onClick }) => {
         className={classnames(
           'text-lg font-bold',
           passed ? 'text-blue-500' : 'text-gray-500',
-          isActive ? '-mt-[5px]' : '',
+          isActive ? '-mt-[4px]' : '',
         )}
       >
         {`Step ${num + 1}`}
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 405a5771..4e629162 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import BounceLoader from 'react-spinners/BounceLoader';
@@ -194,6 +194,12 @@ const HomeScreen = ({ stage, setStage }) => {
     themeSuffix += `&theme=${theme}`;
   }
 
+  const contentSectionRef = useRef(null);
+
+  useEffect(() => {
+    contentSectionRef.current?.scrollIntoView();
+  }, [stage]);
+
   useEffect(() => {
     async function redirectCode() {
       // After requesting Github access, Github redirects back to your app with a code parameter
@@ -229,7 +235,10 @@ const HomeScreen = ({ stage, setStage }) => {
   }
 
   return (
-    <div className="h-full px-2 lg:px-8 text-gray-600 body-font">
+    <div
+      ref={contentSectionRef}
+      className="h-full px-2 lg:px-8 text-gray-600 body-font"
+    >
       <div className="flex flex-col">
         <div className="m-4 rounded-sm">
           <div className="lg:p-4">