From cc92f0ebf923f22eabfa1c7056a79b2326fc8ed1 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Mon, 9 Feb 2026 15:53:30 +0000
Subject: [PATCH 1/8] add step counter for progress bar

---
 src/assets/stylesheets/ProgressBar.scss                  | 9 ++++++++-
 .../InstructionsPanel/ProgressBar/ProgressBar.jsx        | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 6ed155b8e..06dfa5d95 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -1,4 +1,4 @@
-@use './rpf_design_system/spacing' as *;
+@use "./rpf_design_system/spacing" as *;
 
 .progress-bar {
   accent-color: var(--editor-color-theme);
@@ -17,3 +17,10 @@
     padding: $space-0-5;
   }
 }
+
+.step-counter {
+  display: var(--display-step-counter, none);
+  align-items: center;
+  justify-content: center;
+  margin: $space-0-5 0 0 0;
+}
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 27d4993ed..f9ccd2855 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -32,6 +32,10 @@ const ProgressBar = () => {
   };
 
   return (
+    <>
+      <p className="step-counter">{`${
+        currentStepPosition + 1
+      } of ${numberOfSteps}`}</p>
     <div className="progress-bar">
       <Button
         className={"btn--primary btn--small"}
@@ -51,6 +55,7 @@ const ProgressBar = () => {
         title={t("instructionsPanel.nextStep")}
       />
     </div>
+    </>
   );
 };
 

From 525cd3539d588e4e5f1ad20d1e3bed4dae5d0738 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Mon, 9 Feb 2026 15:57:29 +0000
Subject: [PATCH 2/8] use new var for progress bar colour

---
 src/assets/stylesheets/ProgressBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 06dfa5d95..8a2790c33 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -1,7 +1,7 @@
 @use "./rpf_design_system/spacing" as *;
 
 .progress-bar {
-  accent-color: var(--editor-color-theme);
+  accent-color: var(--progress-bar-color, var(--editor-color-theme));
   display: flex;
   align-items: center;
   justify-content: center;

From 8b9d627c545cc7efd67889a4bf8e0097b0f77c92 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 09:58:33 +0000
Subject: [PATCH 3/8] add button styling class

---
 src/assets/stylesheets/ProgressBar.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 8a2790c33..204cb158b 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -16,6 +16,16 @@
   .btn-outer {
     padding: $space-0-5;
   }
+
+  .btn {
+    margin: $space-0-5;
+    border-radius: var(--step-buttons-radius, inherit);
+    &:hover,
+    &:focus,
+    &:active {
+      border-radius: var(--step-buttons-radius, inherit);
+    }
+  }
 }
 
 .step-counter {

From 763ad6c059dc32305182f8dfb851645870578e6d Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 09:58:41 +0000
Subject: [PATCH 4/8] switch to secondary button

---
 .../ProgressBar/ProgressBar.jsx               | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index f9ccd2855..63bb82c95 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -36,25 +36,25 @@ const ProgressBar = () => {
       <p className="step-counter">{`${
         currentStepPosition + 1
       } of ${numberOfSteps}`}</p>
-    <div className="progress-bar">
-      <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToPreviousStep}
-        ButtonIcon={ChevronLeft}
-        disabled={currentStepPosition === 0}
-        title={t("instructionsPanel.previousStep")}
-      />
-      <progress max={numberOfSteps - 1} value={currentStepPosition}></progress>
-      <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToNextStep}
-        ButtonIcon={ChevronRight}
-        disabled={currentStepPosition === numberOfSteps - 1}
-        title={t("instructionsPanel.nextStep")}
-      />
-    </div>
+      <div className="progress-bar">
+        <Button
+          className={"btn--secondary btn--small"}
+          buttonOuter
+          onClickHandler={goToPreviousStep}
+          ButtonIcon={ChevronLeft}
+          disabled={currentStepPosition === 0}
+          title={t("instructionsPanel.previousStep")}
+        />
+        <progress max={numberOfSteps - 1} value={currentStepPosition} />
+        <Button
+          className={"btn--secondary btn--small"}
+          buttonOuter
+          onClickHandler={goToNextStep}
+          ButtonIcon={ChevronRight}
+          disabled={currentStepPosition === numberOfSteps - 1}
+          title={t("instructionsPanel.nextStep")}
+        />
+      </div>
     </>
   );
 };

From 8875f147a88586e6ed015ec2a4e67920924f1501 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 11:05:59 +0000
Subject: [PATCH 5/8] position step counter above progress bar

---
 src/assets/stylesheets/ProgressBar.scss              | 12 +++++++++---
 .../InstructionsPanel/ProgressBar/ProgressBar.jsx    | 11 +++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 204cb158b..41eeb4860 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -5,12 +5,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  max-inline-size: 300px;
   margin: auto;
 
-  progress {
+  .progress-container {
     flex: 1;
     min-inline-size: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  progress {
+    width: 100%;
   }
 
   .btn-outer {
@@ -32,5 +38,5 @@
   display: var(--display-step-counter, none);
   align-items: center;
   justify-content: center;
-  margin: $space-0-5 0 0 0;
+  margin: 0 0 0 0;
 }
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 63bb82c95..982c890e1 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -33,9 +33,6 @@ const ProgressBar = () => {
 
   return (
     <>
-      <p className="step-counter">{`${
-        currentStepPosition + 1
-      } of ${numberOfSteps}`}</p>
       <div className="progress-bar">
         <Button
           className={"btn--secondary btn--small"}
@@ -45,7 +42,13 @@ const ProgressBar = () => {
           disabled={currentStepPosition === 0}
           title={t("instructionsPanel.previousStep")}
         />
-        <progress max={numberOfSteps - 1} value={currentStepPosition} />
+        <div className="progress-container">
+          <p className="step-counter">{`${
+            currentStepPosition + 1
+          } of ${numberOfSteps}`}</p>
+          <progress max={numberOfSteps - 1} value={currentStepPosition} />
+        </div>
+
         <Button
           className={"btn--secondary btn--small"}
           buttonOuter

From 503e04b6fe2d251bc97237a5ad642a7819a2457c Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 14:15:14 +0000
Subject: [PATCH 6/8] match import with rest of codebase

---
 src/assets/stylesheets/ProgressBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 41eeb4860..6bc38c483 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -1,4 +1,4 @@
-@use "./rpf_design_system/spacing" as *;
+@use './rpf_design_system/spacing' as *;
 
 .progress-bar {
   accent-color: var(--progress-bar-color, var(--editor-color-theme));

From 5767de834d2cf70bac8746ba448abcc6b7e626a2 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 14:21:54 +0000
Subject: [PATCH 7/8] add translation for step counter

---
 public/translations/en.json                              | 1 +
 .../InstructionsPanel/ProgressBar/ProgressBar.jsx        | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/translations/en.json b/public/translations/en.json
index 364d2367d..e1fe50737 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -110,6 +110,7 @@
     "removeInstructions": "Remove instructions",
     "nextStep": "Next step",
     "previousStep": "Previous step",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
     "projectSteps": "Project instructions",
     "edit": "Edit",
     "view": "View",
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 982c890e1..697c7a24d 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -43,9 +43,12 @@ const ProgressBar = () => {
           title={t("instructionsPanel.previousStep")}
         />
         <div className="progress-container">
-          <p className="step-counter">{`${
-            currentStepPosition + 1
-          } of ${numberOfSteps}`}</p>
+          <p className="step-counter">
+            {t("instructionsPanel.stepCounter", {
+              currentStep: currentStepPosition + 1,
+              totalSteps: numberOfSteps,
+            })}
+          </p>
           <progress max={numberOfSteps - 1} value={currentStepPosition} />
         </div>
 

From 407b066dc00ff9bfc61436d3f04b0f9a028bd55d Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Tue, 10 Feb 2026 14:24:15 +0000
Subject: [PATCH 8/8] clean up

---
 src/assets/stylesheets/ProgressBar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index 6bc38c483..d56951b78 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -38,5 +38,5 @@
   display: var(--display-step-counter, none);
   align-items: center;
   justify-content: center;
-  margin: 0 0 0 0;
+  margin: 0;
 }