WebUI: cr-slider: Fix layout with large fonts

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

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <dom-module is="cr-slider">
   <template>
     <style>
       div.outer {
         align-items: stretch;
         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>
   <script src="chrome://resources/cr_elements/cr_slider/cr_slider.js"></script>
 </dom-module>