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..93c1d39d4215757987c6d2967a6960ba1175e081 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 {
+      div#labels {

[Dan Beam, 2017/01/10 20:12:47]

do you need this "div" at the beginning?  what does it do for you?

[stevenjb, 2017/01/10 21:28:19]

Done.

         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin: -4px 16px 0 16px;
       }
 
-      div.labels > div {
+      div#labels > div {
         font-size: 12px;

[Dan Beam, 2017/01/10 20:12:47]

why is this using a px-based font-size?

[stevenjb, 2017/01/10 21:28:19]

It's not clear to me whether this should change with the default font size,
since the slider itself does not. I assumed that it shouldn't. I asked Alan/Tom
in the issue for this bug. (FWIW, Paper element labels do not scale).

       }
 
+      div#label-begin {
+        -webkit-margin-end: 4px;
+      }
+
+      div#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>