From 2df5ef2089dbc8fecbf23c8c597dbbe537de42dc Mon Sep 17 00:00:00 2001
From: lobo <andreas.dahm@gmail.com>
Date: Fri, 23 Oct 2026 13:34:55 +0200
Subject: [PATCH] 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.
---
 .../components/slider-field/slider-field.html |  8 ++--
 .../components/slider-field/slider-field.scss | 37 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/components/slider-field/slider-field.html b/src/app/shared/components/slider-field/slider-field.html
index e15a618..490396b 100644
--- a/src/app/shared/components/slider-field/slider-field.html
+++ b/src/app/shared/components/slider-field/slider-field.html
@@ -1,13 +1,13 @@
-<div class="flex items-center gap-2.5 flex-wrap">
-  <span>{{ label() | translate }}</span>
-  <mat-slider [min]="min()" [max]="max()" [step]="step()" [discrete]="discrete()">
+<div class="slider-row">
+  <span class="slider-label">{{ label() | translate }}</span>
+  <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()"
diff --git a/src/app/shared/components/slider-field/slider-field.scss b/src/app/shared/components/slider-field/slider-field.scss
index 3d47c4b..598ae36 100644
--- a/src/app/shared/components/slider-field/slider-field.scss
+++ b/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;
+  }
+}