From 49b49e2113fe257af3c792ac8f9b1b95cc6f46a0 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 15:34:35 +1100
Subject: [PATCH] Progress bar layout refinement + step label readability

- StepperBar: stepper centred at 700px max-width, cart hugs right edge
- StepIndicator: bump desktop label fontSize to 0.875rem for readability
- DateTimeStep story: demo progress bar + cart in context

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../molecules/StepIndicator/StepIndicator.tsx |  2 +-
 .../DateTimeStep/DateTimeStep.stories.tsx     | 24 +++++++++++++++++++
 .../templates/WizardLayout/WizardLayout.tsx   |  5 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/molecules/StepIndicator/StepIndicator.tsx b/src/components/molecules/StepIndicator/StepIndicator.tsx
index 194da58..62da7ce 100644
--- a/src/components/molecules/StepIndicator/StepIndicator.tsx
+++ b/src/components/molecules/StepIndicator/StepIndicator.tsx
@@ -96,7 +96,7 @@ export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
-                  fontSize: { xs: '0.6875rem', sm: undefined },
+                  fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                 }}
               >
                 {step.label}
diff --git a/src/components/pages/DateTimeStep/DateTimeStep.stories.tsx b/src/components/pages/DateTimeStep/DateTimeStep.stories.tsx
index e116973..8f0f920 100644
--- a/src/components/pages/DateTimeStep/DateTimeStep.stories.tsx
+++ b/src/components/pages/DateTimeStep/DateTimeStep.stories.tsx
@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DateTimeStep } from './DateTimeStep';
 import type { DateTimeStepValues, DateTimeStepErrors } from './DateTimeStep';
 import { Navigation } from '../../organisms/Navigation';
+import { StepIndicator } from '../../molecules/StepIndicator';
+import { CartButton } from '../../molecules/CartButton';
 import Box from '@mui/material/Box';
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -34,6 +36,26 @@ const nav = (
   />
 );
 
+const stepper = (
+  <StepIndicator
+    steps={[
+      { label: 'Details' },
+      { label: 'Venues' },
+      { label: 'Coffins' },
+      { label: 'Extras' },
+      { label: 'Review' },
+    ]}
+    currentStep={0}
+  />
+);
+
+const cart = (
+  <CartButton
+    total={4950}
+    items={[{ section: 'Funeral Provider', name: 'H. Parsons — Essential Package', price: 4950 }]}
+  />
+);
+
 const defaultValues: DateTimeStepValues = {
   firstName: '',
   surname: '',
@@ -90,6 +112,8 @@ export const Default: Story = {
         errors={errors}
         isAtNeed
         navigation={nav}
+        progressStepper={stepper}
+        runningTotal={cart}
       />
     );
   },
diff --git a/src/components/templates/WizardLayout/WizardLayout.tsx b/src/components/templates/WizardLayout/WizardLayout.tsx
index a185bfb..9bfacd0 100644
--- a/src/components/templates/WizardLayout/WizardLayout.tsx
+++ b/src/components/templates/WizardLayout/WizardLayout.tsx
@@ -117,11 +117,10 @@ const StepperBar: React.FC<{
         py: 1.5,
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 2,
+        gap: 3,
       }}
     >
-      <Box sx={{ flex: 1 }}>{stepper}</Box>
+      <Box sx={{ flex: 1, maxWidth: 700, mx: 'auto' }}>{stepper}</Box>
       {total && <Box sx={{ flexShrink: 0 }}>{total}</Box>}
     </Box>
   );