Multistepper steps improvement (#1)

* multistepper steps improvement

* more improvement

src/components/Dialogs/Multistepper/Multistepper.style.ts

@@ -46,7 +46,9 @@ export const StyledStepsInfoContainer = styled.div`
   display: grid;
 
   ${media.small} {
-    grid-template-columns: 1fr 1fr 1fr;
+    width: 100%;
+    grid-template-columns: repeat(6, auto);
+    align-items: center;
     grid-column-gap: ${sizes(4)};
   }
 `

src/components/Dialogs/Multistepper/Multistepper.tsx

@@ -34,18 +34,20 @@ const Multistepper: React.FC<MultistepperProps> = ({ steps, currentStepIdx = 0,
             const isLast = idx === steps.length - 1
 
             return (
-              <StyledStepInfo key={step.title} isActive={isActive}>
-                <StyledCircle isFilled={isActive || isCompleted} isActive={isActive}>
-                  {isCompleted ? <SvgGlyphCheck /> : idx + 1}
-                </StyledCircle>
-                <StyledStepInfoText isActive={isActive}>
-                  <Text variant="caption" secondary>
-                    Step {idx + 1}
-                  </Text>
-                  <StyledStepTitle variant="overhead">{step.title}</StyledStepTitle>
-                </StyledStepInfoText>
+              <>
+                <StyledStepInfo key={step.title} isActive={isActive}>
+                  <StyledCircle isFilled={isActive || isCompleted} isActive={isActive}>
+                    {isCompleted ? <SvgGlyphCheck /> : idx + 1}
+                  </StyledCircle>
+                  <StyledStepInfoText isActive={isActive}>
+                    <Text variant="caption" secondary>
+                      Step {idx + 1}
+                    </Text>
+                    <StyledStepTitle variant="overhead">{step.title}</StyledStepTitle>
+                  </StyledStepInfoText>
+                </StyledStepInfo>
                 {isLast ? null : <StyledChevron />}
-              </StyledStepInfo>
+              </>
             )
           })}
         </StyledStepsInfoContainer>