Refactor Stepper component styles and improve demos

Author: byohannes

stories/Stepper/ClassBased.stories.js

@@ -77,15 +77,16 @@ export const BasicStepper = {
         </Stepper>
 
         <div className="button-container">
-          {activeStep > 0 && (
+          {
             <button
               className="nav-button prev"
               onClick={() => handleStepChange(activeStep - 1)}
               aria-label="Previous Step"
+              disabled={activeStep === 0}
             >
-              Back
+              Prev
             </button>
-          )}
+          }
           {activeStep < steps.length - 1 && (
             <button
               className="nav-button next"

stories/Stepper/VerticalStepper.css

@@ -72,22 +72,24 @@
 }
 
 .custom-step-content-wrapper {
-  margin-top: 16px;
-  padding-left: 48px;
-  width: 300px;
+  margin-top: 5px;
+  padding-left: 5px;
+  width: 500px;
   color: #666;
   box-sizing: border-box;
 }
 
 .custom-navigation-buttons {
   display: flex;
   justify-content: center;
+  align-items: center;
   gap: 12px;
   margin-top: 24px;
 }
 
 .custom-navigation-button {
-  padding: 10px 20px;
+  height: 40px;
+  padding: 0 20px;
   background-color: #1976d2;
   color: white;
   border: none;