fix: use max-width prop instead of width %

web3ui · Mar 8, 2022 · 2314de9 · 2314de9
1 parent b4960d8
commit 2314de9
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -51,7 +51,7 @@ export interface StepperProps {
     /**
      * header width
      */
-    headerWidth?: number;
+    headerWidth?: string;
 }
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ export interface StepperProps { @@
         /**
          * header width
          */
-        headerWidth?: number;
+        headerWidth?: string;
     }
     /**
@@ Expand Down @@