Slider layout in Interactive Elements korrigieren

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 {
+      #component-slider .sg-activatable-row {
-        flex-direction: row;
+        grid-template-columns: auto minmax(0, 1fr);
-        flex-wrap: wrap;
+        align-items: start;
-        align-items: center;
-        width: 100%;
-        max-width: 100%;
       }
 
-      .sg-slider-row .sg-label {
+      #component-slider .sg-activatable-row .sg-slider-row {
-        min-width: 100%;
+        grid-template-columns: minmax(0, 1fr) auto;
-        flex: 0 0 100%;
+        grid-template-areas:
+          "label label"
+          "slider value";
+        row-gap: var(--spacing-small);
       }
 
-      .sg-slider {
+      #component-slider .sg-activatable-row .sg-slider-row .sg-label {
-        flex: 1 1 auto;
+        grid-area: label;
-        width: auto;
-        max-width: none;
-        min-width: 0;
       }
 
-      .sg-slider-value {
+      #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
-        flex: 0 0 auto;
+        grid-area: slider;
+      }
+
+      #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
+        grid-area: value;
         align-self: center;
-        white-space: nowrap;
       }
 
     }