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

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

Index: chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html b/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
index 95b7eb5b4f455d75b9fc0986c15f47c998cdbc8e..d0dd778a360b786e9b9d2df612ea3dbfc4a268e7 100644
--- a/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
+++ b/chrome/browser/resources/settings/search_engines_page/search_engine_entry.html
@@ -30,6 +30,7 @@
         word-break: break-word;
       }
 
+      #keyword-column > div,
       .favicon-image + div {
         -webkit-margin-end: 8px;
       }
@@ -54,7 +55,7 @@
             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