[MD settings] content settings add site button; layout fixes

chrome/browser/resources/settings/settings_shared_css.html

Index: chrome/browser/resources/settings/settings_shared_css.html
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index 298ac98e5508111c2f3bb056ab0d1a41f0007b3a..fc958c5665d8dbd9e8b3872889382f7d9baad085 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -163,8 +163,9 @@
       .secondary-button {
         --paper-button: {
           color: var(--paper-grey-600);
-          text-decoration: none;
           font-weight: 500;
+          min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
+          text-decoration: none;
         };
         --paper-button-flat-keyboard-focus: {
           background: rgba(0, 0, 0, .12);
@@ -229,11 +230,6 @@
         display: block;
       }
 
-      .list-frame .secondary,
-      .list-item .secondary {
-        @apply(--settings-secondary);
-      }
-
       /* A list-item is intended to be contained within a list-frame. The list
        * frame will setup the initial start margin. */
       .list-item {
@@ -324,6 +320,15 @@
         @apply(--settings-secondary);
       }
 
+      /* The |:empty| CSS selector only works when there is no whitespace.
+       * E.g. <div>[[foo]]</div> will be |:empty| when foo == ""; and
+       * <div> [[foo]] </div> will not be |:empty| when foo == "". Ensure there
+       * is no extra whitespace when the contents of .secondary may be "".
+       */
+      .secondary:empty {
+        margin: 0;
+      }
+
       /* The middle part (horizontally) of a row. */
       .settings-box .middle {
         -webkit-padding-start: 16px;