Bug 1776594 - Switch to using grid for the range slider rows r=julienw

Differential Revision: https://phabricator.services.mozilla.com/D150337

devtools/client/performance-new/components/Range.js

@@ -48,7 +48,7 @@ class Range extends PureComponent {
     const rangeValue = scale.fromValueToFraction(value) * max;
 
     return div(
-      { className: "perf-settings-row" },
+      { className: "perf-settings-range-row" },
       label(
         {
           className: "perf-settings-label",
@@ -56,25 +56,19 @@ class Range extends PureComponent {
         },
         labelText
       ),
-      div(
-        { className: "perf-settings-value" },
-        div(
-          { className: "perf-settings-range-input" },
-          input({
-            type: "range",
-            className: `perf-settings-range-input-el`,
-            min,
-            "aria-valuemin": scale.fromFractionToValue(0),
-            max,
-            "aria-valuemax": scale.fromFractionToValue(1),
-            value: rangeValue,
-            "aria-valuenow": value,
-            onChange: this.handleInput,
-            id,
-          })
-        ),
-        div({ className: `perf-settings-range-value` }, display(value))
-      )
+      input({
+        type: "range",
+        className: `perf-settings-range-input`,
+        min,
+        "aria-valuemin": scale.fromFractionToValue(0),
+        max,
+        "aria-valuemax": scale.fromFractionToValue(1),
+        value: rangeValue,
+        "aria-valuenow": value,
+        onChange: this.handleInput,
+        id,
+      }),
+      div({ className: `perf-settings-range-value` }, display(value))
     );
   }
 }

devtools/client/themes/aboutprofiling.css

@@ -80,26 +80,18 @@ h2 {
   line-height: 1.8;
 }
 
-.perf-settings-label {
-  height: 30px;
-  min-width: 140px;
-}
-
-.perf-settings-value {
-  display: flex;
-  flex: 1;
+.perf-settings-range-row {
+  display: grid;
+  grid-template-columns: 140px 1fr 90px;
+  align-items: center;
+  min-height: 30px;
 }
 
 .perf-settings-range-input {
-  flex: 1;
-}
-
-.perf-settings-range-input-el {
-  width: 100%;
+  margin: 0;
 }
 
 .perf-settings-range-value {
-  min-width: 90px;
   text-align: end;
 }