ensure step numbers remain circular regardless of text length

Author: moaqz

src/components/recipe-form/steps/index.tsx

@@ -41,7 +41,7 @@ export function Steps(props: StepsProps) {
         <FieldArray of={store} name="steps">
           {(fieldArray) => (
             fieldArray.items.value.map((item, idx) => (
-              <li key={item} class={`${styles.step} ${styles.numbered}`}>
+              <li key={item} class={`${styles.step} numbered`}>
                 <Field of={store} name={`steps.${idx}.description`}>
                   {(field, props) => (
                     <textarea

src/styles/index.css

@@ -175,3 +175,22 @@ input[type="number"]::-webkit-inner-spin-button {
     background-color: var(--accent-red);
   }
 }
+
+.numbered {
+  --number-size: 1.5rem;
+  counter-increment: stepsCounter 1;
+
+  &:before {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--number-size);
+    width: var(--number-size);
+    background-color: var(--accent-cyan);
+    color: white;
+    font-weight: bold;
+    border-radius: 50vh;
+    content: counter(stepsCounter);
+  }
+}

src/views/recipe.module.css

@@ -57,19 +57,6 @@
   align-items: center;
   gap: 0.5rem;
   text-wrap: pretty;
-
-  &:before {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--number-size);
-    width: var(--number-size);
-    color: white;
-    background-color: var(--accent-cyan);
-    font-weight: bold;
-    border-radius: 50vh;
-    content: counter(stepsCounter);
-  }
 }
 
 .actions {

src/views/recipe.tsx

@@ -109,7 +109,7 @@ export function RecipeView() {
 
             <ol class={styles.stepsList}>
               {recipeState.data.steps?.map((item, idx) => (
-                <li key={idx} class={styles.step}>
+                <li key={idx} class={`${styles.step} numbered`}>
                   {item.description}
                 </li>
               ))}