WebUI: ensure padding between title and buttons when body is scrollable

Bug: 844329
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Id9b00c368e32c9cea170af7c6dfaf9a5272e1301
Reviewed-on: https://chromium-review.googlesource.com/1066326Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561365}

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -31,9 +31,14 @@
           min-height: calc(100vh - 40px);
           width: 640px;
         };
+        --cr-dialog-wrapper: {
+          height: 100%;
+        };
         --cr-dialog-body: {
-          height: 100vh;
-          padding: 12px 16px;
+          padding: 0 16px;
+        };
+        --cr-dialog-body-container: {
+          flex: 1;
         };
       }
 
@@ -104,6 +109,14 @@
       :host #invitationPromo .invitation-buttons {
         padding: 12px 0;
       }
+
+      print-preview-destination-list {
+        padding-bottom: 18px;
+      }
+
+      print-preview-destination-list:last-child {
+        padding-bottom: 0;
+      }
     </style>
     <cr-dialog id="dialog" on-close="onCloseOrCancel_" show-close-button>
       <div slot="title">
@@ -128,18 +141,20 @@
         </print-preview-search-box>
       </div>
       <div slot="body" scrollable>
-        <print-preview-destination-list
-            destinations="[[recentDestinationList_]]"
-            search-query="[[searchQuery_]]"
-            title="$i18n{recentDestinationsTitle}"
-            on-destination-selected="onDestinationSelected_">
-        </print-preview-destination-list>
-        <print-preview-destination-list destinations="[[destinations_]]"
-            has-action-link loading-destinations="[[loadingDestinations_]]"
-            search-query="[[searchQuery_]]"
-            title="$i18n{printDestinationsTitle}"
-            on-destination-selected="onDestinationSelected_">
-        </print-preview-destination-list>
+        <div>
+          <print-preview-destination-list
+              destinations="[[recentDestinationList_]]"
+              search-query="[[searchQuery_]]"
+              title="$i18n{recentDestinationsTitle}"
+              on-destination-selected="onDestinationSelected_">
+          </print-preview-destination-list>
+          <print-preview-destination-list destinations="[[destinations_]]"
+              has-action-link loading-destinations="[[loadingDestinations_]]"
+              search-query="[[searchQuery_]]"
+              title="$i18n{printDestinationsTitle}"
+              on-destination-selected="onDestinationSelected_">
+          </print-preview-destination-list>
+        </div>
         <print-preview-provisional-destination-resolver id="provisionalResolver"
             destination-store="[[destinationStore]]">
         </print-preview-provisional-destination-resolver>

chrome/browser/resources/print_preview/new/destination_list.html

@@ -14,7 +14,7 @@
   <template>
     <style include="print-preview-shared action-link cr-hidden-style throbber">
       :host {
-        padding: 0 14px 18px;
+        display: block;
         user-select: none;
       }
 

chrome/browser/resources/print_preview/new/search_dialog_css.html

@@ -37,9 +37,6 @@
           box-sizing: border-box;
           padding: 0 16px 12px 16px;
         };
-        --cr-dialog-button-container: {
-          padding: 16px;
-        };
         --cr-dialog-wrapper: {
           max-height: calc(100vh - 40px);
         };

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

@@ -21,6 +21,9 @@
            */
           padding: 8px 0 calc(1rem - 8px) 0;
         };
+        --cr-dialog-body: {
+          height: 184px;
+        };
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -50,7 +50,7 @@
       }
 
       :host ::slotted([slot=body]) {
-        padding: 16px 20px;
+        padding: 0 20px;
         @apply --cr-dialog-body;
       }
 
@@ -58,14 +58,14 @@
         flex: 1;
         font-size: calc(15 / 13 * 100%);
         line-height: 1;
-        padding: 16px 20px 0 20px;
+        padding: 16px 20px;
         @apply --cr-dialog-title;
       }
 
       :host ::slotted([slot=button-container]) {
         display: flex;
         justify-content: flex-end;
-        padding: 0 16px 16px 16px;
+        padding: 16px;
         @apply --cr-dialog-button-container;
       }
 
@@ -82,6 +82,7 @@
         border-bottom: 1px solid transparent;
         border-top: 1px solid transparent;
 
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         min-height: 60px; /* Minimum reasonably usable height. */