Fix mobile slider label spacing and value wrapping

2026-05-19 15:46:15 +02:00
parent 0895b8d24a
commit cca57b1dfe
1 changed files with 29 additions and 14 deletions
@@ -956,26 +956,41 @@ section + section {
    }

    @media (max-width: 48rem) {
-      .sg-slider-row {
-        flex-direction: column;
-        align-items: flex-start;
+      #component-slider .sg-state-example {
+        grid-template-columns: 1fr;
+        align-items: start;
+        width: 100%;
+      }
+
+      #component-slider .sg-state-example > :last-child {
+        width: 100%;
+        min-width: 0;
+      }
+
+      #component-slider .sg-slider-row {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
        width: 100%;
        max-width: 100%;
      }

-      .sg-slider-row .sg-label {
+      #component-slider .sg-slider-row .sg-label {
+        min-width: 100%;
+        flex: 0 0 100%;
+      }
+
+      #component-slider .sg-slider {
+        flex: 1 1 auto;
+        width: auto;
+        max-width: none;
        min-width: 0;
+      }
+
+      #component-slider .sg-slider-value {
        flex: 0 0 auto;
-      }
-
-      .sg-slider {
-        min-width: 0;
-        max-width: 100%;
-        width: 100%;
-      }
-
-      .sg-slider-value {
-        align-self: flex-end;
+        align-self: center;
+        white-space: nowrap;
      }
    }