WebUI: cr-slider: Fix layout with large fonts

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

Index: ui/webui/resources/cr_elements/cr_slider/cr_slider.html
diff --git a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
index 6f6bfc7fe79f13f2b10e6143a443510946d544fb..71710d47754bde5b582e727c4972eb7f9232f99d 100644
--- a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
+++ b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
@@ -10,34 +10,44 @@
         display: flex;
         flex-direction: column;
         margin: 8px 0;
+        min-width: 200px;
       }
 
-      div.labels {
+      #labels {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin: -4px 16px 0 16px;
       }
 
-      div.labels > div {
+      #labels > div {
         font-size: 12px;
       }
 
+      #label-begin {
+        -webkit-margin-end: 4px;
+      }
+
+      #label-end {
+        -webkit-margin-begin: 4px;
+      }
+
       paper-slider {
         /* Make the slider bar always grey. */
         --paper-slider-active-color: var(--paper-grey-400);
         /* Make the knob always blue. */
         --paper-slider-knob-start-color: var(--google-blue-700);
         --paper-slider-knob-start-border-color: var(--google-blue-700);
+        width: 100%;
       }
     </style>
     <div class="outer">
       <paper-slider id="slider" disabled="[[disabled]]" snaps
           on-immediate-value-changed="onSliderChanged_">
       </paper-slider>
-      <div class="labels">
-        <div>[[labelMin]]</div>
-        <div>[[labelMax]]</div>
+      <div id="labels">
+        <div id="label-begin">[[labelMin]]</div>
+        <div id="label-end">[[labelMax]]</div>
       </div>
     </div>
   </template>