refactor: stepper will squish together on smaller display sizes

- removed everything unused
- simplify structure

Author: BGruenberg

src/app/shared/components/stepper/stepper.component.html

@@ -1,23 +1,17 @@
 <aside aria-labelledby="stepper">
-  <div class="row justify-content-center">
-    <p class="stepper-text mb-1 small text-bold" id="stepper">
-      {{ 'navigation.step' | translate }} {{ currentStep + 1 }}/{{ steps.length }}
-    </p>
-  </div>
-  <div class="row justify-content-center g-0 mb-4">
-    @for (step of steps; track step; let i = $index) {
-      <div class="col-auto">
-        <div class="row g-0 align-items-center">
-          <div class="col-auto p-0">
-            <div [ngClass]="{'circle-active': step===currentStep}" class="circle"></div>
-          </div>
-          <div class="col-auto p-0">
-            @if (i !== steps.length - 1) {
-              <div class="line"></div>
-            }
-          </div>
-        </div>
-      </div>
-    }
+  <div class="container">
+    <div class="d-flex justify-content-center">
+      <p class="mb-1 small text-bold">
+        {{ 'navigation.step' | translate }} {{ currentStep + 1 }}/{{ steps.length }}
+      </p>
+    </div>
+    <div class="d-flex mb-4 align-items-center">
+      @for (step of steps; track step; let i = $index) {
+        <div class="circle" [ngClass]="{'circle-active': step===currentStep}"></div>
+        @if (i !== steps.length - 1) {
+          <div class="line"></div>
+        }
+      }
+    </div>
   </div>
 </aside>

src/app/shared/components/stepper/stepper.component.scss

@@ -1,31 +1,27 @@
 @import "src/default";
 @import 'bootstrap/scss/mixins';
 
-.stepper-text {
-  width: max-content;
-}
+.container {
+  max-width: 300px;
 
-.circle {
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  border: 3px solid $dark-gray;
-  background-color: $medium-gray;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 2px 5px 0 rgba(0, 0, 0, 0.18);
-}
+  .circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    border: 3px solid $dark-gray;
+    background-color: $medium-gray;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 2px 5px 0 rgba(0, 0, 0, 0.18);
+  }
 
-.circle-active {
-  border-color: $dark-gray;
-  background-color: $secondary;
-}
+  .circle-active {
+    border-color: $dark-gray;
+    background-color: $secondary;
+  }
 
-.line {
-  border: none;
-  border-top-width: 0;
-  border-bottom-width: 0;
-  background-color: $stepperLine;
-  width: $spacer*4;
-  height: 2px;
-  margin: auto 0;
-  padding: 0;
+  .line {
+    width: 100%;
+    height: 2px;
+    background: $stepperLine;
+    flex: 1;
+  }
 }