From b06991e16ff3bcaf4207401174e4c0cf3c65f60b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 10:04:48 +0200
Subject: [PATCH] Slider layout in Interactive Elements korrigieren

---
 styleguide.css | 72 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 55 insertions(+), 17 deletions(-)

diff --git a/styleguide.css b/styleguide.css
index 520489d..92ebb3a 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1022,6 +1022,44 @@ section + section {
       opacity: var(--disabled-opacity);
     }
 
+    #component-slider .sg-slider-row {
+      display: grid;
+      grid-template-columns:
+        var(--layout-input-label-width)
+        minmax(0, 1fr)
+        auto;
+      align-items: center;
+      column-gap: var(--spacing-small);
+      width: 100%;
+    }
+
+    #component-slider .sg-slider-row .sg-label {
+      min-width: 0;
+      flex: 0 0 auto;
+      grid-column: 1;
+    }
+
+    #component-slider .sg-slider-row .sg-slider {
+      width: 100%;
+      max-width: none;
+      min-width: 0;
+      grid-column: 2;
+    }
+
+    #component-slider .sg-slider-row .sg-slider-value {
+      min-width: calc(var(--interaction-height) * 1.25);
+      grid-column: 3;
+      justify-self: end;
+    }
+
+    #component-slider .sg-activatable-row {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: center;
+      column-gap: var(--spacing-small);
+      width: 100%;
+    }
+
     .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
       display: grid;
       grid-template-columns:
@@ -1068,30 +1106,30 @@ section + section {
         min-width: 0;
       }
 
-      .sg-slider-row {
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        width: 100%;
-        max-width: 100%;
+      #component-slider .sg-activatable-row {
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: start;
       }
 
-      .sg-slider-row .sg-label {
-        min-width: 100%;
-        flex: 0 0 100%;
+      #component-slider .sg-activatable-row .sg-slider-row {
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-areas:
+          "label label"
+          "slider value";
+        row-gap: var(--spacing-small);
       }
 
-      .sg-slider {
-        flex: 1 1 auto;
-        width: auto;
-        max-width: none;
-        min-width: 0;
+      #component-slider .sg-activatable-row .sg-slider-row .sg-label {
+        grid-area: label;
       }
 
-      .sg-slider-value {
-        flex: 0 0 auto;
+      #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
+        grid-area: slider;
+      }
+
+      #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
+        grid-area: value;
         align-self: center;
-        white-space: nowrap;
       }
 
     }