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

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

Index: chrome/browser/resources/settings/people_page/people_page.html
diff --git a/chrome/browser/resources/settings/people_page/people_page.html b/chrome/browser/resources/settings/people_page/people_page.html
index 9e3bb48757d6aa7e6bf5a7963ead16ce4a988604..b66583953c23d8b74d8a28da330c0ed8dc9f515e 100644
--- a/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chrome/browser/resources/settings/people_page/people_page.html
@@ -99,6 +99,17 @@
         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">
@@ -108,14 +119,14 @@
                 style="background-image: [[getIconImageset_(profileIconUrl_)]]">
             </div>
 <if expr="not chromeos">
-            <div class="middle two-line text-elide" on-tap="onProfileNameTap_"
-                actionable>
+            <div class="middle two-line no-min-width"
+                on-tap="onProfileNameTap_" actionable>
 </if>
 <if expr="chromeos">
-            <div class="middle two-line text-elide" on-tap="onPictureTap_"
+            <div class="middle two-line no-min-width" 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]]