fix(slider-field): use fixed column widths so rows align

Label, slider and number field now have fixed widths, so stacked
rows line up. Below 640 px the label sits above the slider and field.

src/app/shared/components/slider-field/slider-field.html

@@ -1,13 +1,13 @@
-<div class="flex items-center gap-2.5 flex-wrap">
+<div class="slider-row">
-  <span>{{ label() | translate }}</span>
+  <span class="slider-label">{{ label() | translate }}</span>
-  <mat-slider [min]="min()" [max]="max()" [step]="step()" [discrete]="discrete()">
+  <mat-slider class="slider-track" [min]="min()" [max]="max()" [step]="step()" [discrete]="discrete()">
     <input matSliderThumb
            [attr.aria-label]="label() | translate"
            [ngModel]="value()"
            (ngModelChange)="value.set($event)"
            (valueChange)="onSliderRelease($event)">
   </mat-slider>
-  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="w-[110px]">
+  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="slider-field">
     <input #field matInput type="number"
            [attr.aria-label]="label() | translate"
            [min]="min()" [max]="max()" [step]="step()"

src/app/shared/components/slider-field/slider-field.scss

@@ -3,3 +3,40 @@
 :host {
   @include mat.form-field-density(-4);
 }
+
+.slider-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.slider-label {
+  flex: 0 0 15rem;
+}
+
+.slider-track {
+  flex: 0 0 12rem;
+  width: 12rem;
+  min-width: 0;
+  margin: 0;
+}
+
+.slider-field {
+  flex: 0 0 5.5rem;
+  width: 5.5rem;
+}
+
+@media (max-width: 639px) {
+  .slider-row {
+    flex-wrap: wrap;
+  }
+
+  .slider-label {
+    flex-basis: 100%;
+  }
+
+  .slider-track {
+    flex: 1 1 0;
+    width: auto;
+  }
+}