Chrome Settings: minor fix to settings_toggle_button padding

When using a settings-toggle-button with a sub-label whose contents can
fit into one or two lines depending on screen resolution, there was no
way to get consistent vertical padding.

This change explicitly sets padding inside of the settings_toggle_button's
outerRow element in order to guarantee padding for the item.

This has the negative side-effect of causing the
settings-toggle-button to expand vertically if the window is resized such that
the sub-label text overflows to a new line.

Bug: 803683
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Iff644e6efb4aa293f4ae41e9035a961578d576f0
Reviewed-on: https://chromium-review.googlesource.com/1133300Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: proberge <proberge@chromium.org>
Cr-Commit-Position: refs/heads/master@{#574423}

chrome/browser/resources/settings/controls/settings_toggle_button.html

@@ -19,10 +19,6 @@
         border-top: none;
       }
 
-      :host(.three-line) {
-        min-height: var(--settings-row-three-line-min-height);
-      }
-
       :host([elide-label]),
       :host([elide-label]) #outerRow,
       :host([elide-label]) #outerRow > div.flex {
@@ -35,8 +31,10 @@
 
       #outerRow {
         align-items: center;
+        box-sizing: border-box;
         display: flex;
         min-height: var(--settings-row-two-line-min-height);
+        padding: 12px 0;
         width: 100%;
       }
 

chrome/browser/resources/settings/passwords_and_forms_page/passwords_section.html

@@ -67,7 +67,6 @@
       </div>
     </template>
     <settings-toggle-button id="autosigninCheckbox"
-        class="three-line"
         pref="{{prefs.credentials_enable_autosignin}}"
         label="$i18n{passwordsAutosigninLabel}"
         sub-label="$i18n{passwordsAutosigninDescription}">