From 2314de930c29ca5d126d767dd08ece6e3577ab78 Mon Sep 17 00:00:00 2001
From: dani <martinelli.daniele7@gmail.com>
Date: Tue, 8 Mar 2022 14:00:56 +0100
Subject: [PATCH] fix: use max-width prop instead of width %

---
 src/components/Stepper/Stepper.stories.tsx | 2 +-
 src/components/Stepper/Stepper.styles.ts   | 4 ++--
 src/components/Stepper/Stepper.tsx         | 2 +-
 src/components/Stepper/types.ts            | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
index 4fd7cf9f0..c29a4f447 100644
--- a/src/components/Stepper/Stepper.stories.tsx
+++ b/src/components/Stepper/Stepper.stories.tsx
@@ -63,5 +63,5 @@ SmallerStepperCount.args = {
     step: 1,
     stepData: noNavTestStepData,
     hasNavButtons: false,
-    headerWidth: 40,
+    headerWidth: '40',
 };
diff --git a/src/components/Stepper/Stepper.styles.ts b/src/components/Stepper/Stepper.styles.ts
index 220f76aa8..b647cb58e 100644
--- a/src/components/Stepper/Stepper.styles.ts
+++ b/src/components/Stepper/Stepper.styles.ts
@@ -123,6 +123,6 @@ export const DivStyledHelper = styled.div`
 `;
 
 export const HeaderStyled = styled.header<THeaderStyleProps>`
-    ${(p) => p.headerWidth && `width: ${p.headerWidth}%`};
-    align-self: 'center';
+    ${(p) => p.headerWidth && `max-width: ${p.headerWidth}px`};
+    width: 100%;
 `;
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index 0abea5237..442a4f233 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -26,7 +26,7 @@ const Stepper: React.FC<StepperProps> = ({
     completeTitle = 'all done, nice!',
     completeMessage = 'You should tell the user what to do next, or use the onComplete function to programmatically fire an event',
     onComplete = () => null,
-    headerWidth = 100,
+    headerWidth,
 }) => {
     const [activeStep, setActiveStep] = useState(step);
     const myStepRef = useRef(activeStep);
diff --git a/src/components/Stepper/types.ts b/src/components/Stepper/types.ts
index 2a5a220fd..f6deaa686 100644
--- a/src/components/Stepper/types.ts
+++ b/src/components/Stepper/types.ts
@@ -51,7 +51,7 @@ export interface StepperProps {
     /**
      * header width
      */
-    headerWidth?: number;
+    headerWidth?: string;
 }
 
 /**