Fix mobile slider label spacing and value wrapping

styleguide.css

@@ -956,26 +956,41 @@ section + section {
     }
 
     @media (max-width: 48rem) {
-      .sg-slider-row {
+      #component-slider .sg-state-example {
-        flex-direction: column;
+        grid-template-columns: 1fr;
-        align-items: flex-start;
+        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;
-      }
+        align-self: center;
-
+        white-space: nowrap;
-      .sg-slider {
-        min-width: 0;
-        max-width: 100%;
-        width: 100%;
-      }
-
-      .sg-slider-value {
-        align-self: flex-end;
       }
     }