MD Settings: on people page, fix long names breaking arrow icon

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
@@ skipping 81 matching lines @@
       .footer .settings-box {
         --settings-box-row-padding: 0;
       }
 
       .delete-profile-warning {
         /* In order to line up with the checkbox text. */
         -webkit-padding-start: 36px;
         padding-bottom: 10px;
         padding-top: 10px;
       }
+
+      /**
+       * By default, flexbox children have min-width calculated to be the width
+       * of the content. However, in some cases we might want to allow the
+       * width to be smaller than the content (i.e. for long text to ellipsis).
+       * In such cases this class should be applied.
+       * (See: https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5)
+       */
+      .no-min-width {
+        min-width: 0;

[hcarmona, 2017/01/19 01:53:31]

Can we use "overflow: hidden" here instead?
It makes the code more readable and you wouldn't need to comment.

[scottchen, 2017/01/19 21:32:59]

using overflow: hidden will cut-off the paper-icon-button-light, since it
actually slightly out of the container's bounds. Alternatively, we could adjust
our styling so that  .paper-icon-button-light doesn't need negative margin-end,
but that would have a large impact surface (since its used a lot in settings)
and might accidentally break something else easily.

+      }
     </style>
     <settings-animated-pages id="pages" section="people">
       <neon-animatable route-path="default">
         <div id="picture-subpage-trigger" class="settings-box first two-line">
           <template is="dom-if" if="[[syncStatus]]">
             <div id="profile-icon" on-tap="onPictureTap_" actionable
                 style="background-image: [[getIconImageset_(profileIconUrl_)]]">
             </div>
 <if expr="not chromeos">
-            <div class="middle two-line text-elide" on-tap="onProfileNameTap_"
+            <div class="middle two-line no-min-width"
+                on-tap="onProfileNameTap_" actionable>
+</if>
+<if expr="chromeos">
+            <div class="middle two-line no-min-width" on-tap="onPictureTap_"
                 actionable>
 </if>
-<if expr="chromeos">
-            <div class="middle two-line text-elide" on-tap="onPictureTap_"
-                actionable>
-</if>
-              <div class="flex">
+              <div class="flex text-elide">
                 <span id="profile-name">[[profileName_]]</span>
                 <div class="secondary" hidden="[[!syncStatus.signedIn]]">
                   [[syncStatus.signedInUsername]]
                 </div>
               </div>
               <button class="subpage-arrow" is="paper-icon-button-light">
               </button>
             </div>
 <if expr="not chromeos">
             <template is="dom-if" if="[[showSignin_(syncStatus)]]">
@@ skipping 262 matching lines @@
 <if expr="chromeos">
     <template is="dom-if" if="[[showEasyUnlockTurnOffDialog_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog"
           on-close="onEasyUnlockTurnOffDialogClose_">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>