MD Settings: Search engines, improve spacing for long keywords.

chrome/browser/resources/settings/search_engines_page/search_engine_entry.html

 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../focus_row_behavior.html">
 <link rel="import" href="search_engine_dialog.html">
@@ skipping 12 matching lines @@
         align-items: center;
         display: flex;
       }
 
       #name-column,
       #keyword-column {
         flex: 3;
         word-break: break-word;
       }
 
+      #keyword-column > div,
       .favicon-image + div {
         -webkit-margin-end: 8px;
       }
 
       #url-column {
         flex: 4;
       }
 
       :host(:not([show-dots_])) paper-icon-button {
         pointer-events: none;
         visibility: hidden;
       }
     </style>
 
     <template is="dom-if" if="[[showEditSearchEngineDialog_]]" restamp>
       <settings-search-engine-dialog model="[[engine]]">
       </settings-search-engine-dialog>
     </template>
     <div class="list-item" focus-row-container>
       <div id="name-column">
         <div class="favicon-image"
             style="background-image: [[getIconSet_(engine.iconURL)]]"></div>
         <div>[[engine.displayName]]</div>
       </div>
-      <div id="keyword-column">[[engine.keyword]]</div>
+      <div id="keyword-column"><div>[[engine.keyword]]</div></div>

[dpapad, 2017/05/16 01:38:59]

Need to wrap with an extra div, such that the margin is not added on a flex
child.

Adding margin directly to flex children messes up the table layout (margin is
initially subtracted from the available space, then flex children are laid out,
then margin is re-added).

       <div id="url-column" class="text-elide">[[engine.url]]</div>
       <paper-icon-button icon="cr:more-vert" on-tap="onDotsTap_"
           title="$i18n{moreActions}" focus-row-control
           focus-type="cr-menu-button">
       </paper-icon-button>
       <dialog is="cr-action-menu">
         <button class="dropdown-item" role="option" on-tap="onMakeDefaultTap_"
             hidden$="[[!engine.canBeDefault]]" id="makeDefault">
           $i18n{searchEnginesMakeDefault}
         </button>
         <button class="dropdown-item" role="option" on-tap="onEditTap_"
             hidden$="[[!engine.canBeEdited]]"
             id="edit">$i18n{edit}</button>
         <button class="dropdown-item" role="option" on-tap="onDeleteTap_"
             hidden$="[[!engine.canBeRemoved]]"
             id="delete">$i18n{searchEnginesRemoveFromList}</button>
       </dialog>
     </div>
     <template is="dom-if" if="[[engine.extension]]">
       <extension-controlled-indicator
           extension-id="[[engine.extension.id]]"
           extension-name="[[engine.extension.name]]"
           extension-can-be-disabled="[[engine.extension.canBeDisabled]]">
       </extension-controlled-indicator>
     </template>
   </template>
   <script src="search_engine_entry.js"></script>
 </dom-module>