fix Step spacing (#485)

* fix Step spacing

* ch

.changeset/curvy-toys-clean.md

@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+fix Step spacing

packages/components/src/step/step.stories.tsx

@@ -56,17 +56,17 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="neutral" value={1} />
         <Step type="neutral" value={10} />
         <Step type="neutral" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="complete" value={1} />
         <Step type="complete" value={10} />
         <Step type="complete" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="active" value={1} />
         <Step type="active" value={10} />
         <Step type="active" value={999} />

packages/components/src/step/step.tsx

@@ -30,11 +30,14 @@ export { Step }
 export type { Props as StepProps }
 
 const Base = styled(Stack, {
-  padding: 2,
+  paddingVertical: 1,
+  minWidth: 20,
+  maxWidth: 28,
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
   flexBasis: 'fit-content',
+  width: 'fit-content',
 })
 
 const Content = styled(Stack, {
@@ -42,8 +45,7 @@ const Content = styled(Stack, {
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
-  minHeight: 18,
-  maxHeight: 18,
+  height: 18,
   minWidth: 18,
   maxWidth: 28,
   justifyContent: 'center',