MD Settings: fix focus outline getting cut off in manage password page

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="/settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       /* Included here so we don't have to include "iron-positioning" in every
        * stylesheet. See crbug.com/498405. */
       [hidden] {
@@ skipping 152 matching lines @@
       paper-radio-group {
         width: 100%;
       }
 
       .text-elide {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
+      /**
+       * 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;
+      }
+
       .button-strip {
         text-align: end;
       }
 
       /* A list-frame is an outer container for list-items. It is intended to be
        * outside of a settings-box. A list-frame is likely to follow a
        * settings box. */
       .list-frame {
         @apply(--settings-list-frame-padding);
         align-items: center;
@@ skipping 193 matching lines @@
       /* Turns the arrow direction downwards, when the bubble is placed above
        * the anchor element */
       .search-bubble-innards.above::after {
         -webkit-transform: rotate(-135deg);
         bottom: -5px;
         top: auto;
       }
     </style>
   </template>
 </dom-module>