WebUI NTP: explicitly add space to the bottom of the content area

When the NTP has a vertical scroll bar, the NTP contents had a 32px
empty space at the bottom. This was from the cr-button which was using
"position: sticky" to stick to the bottom right of the window. The empty
space looks good, but it should not be due to the height of the
cr-button (it is not obvious).

This CL introduces a div to explicitly set a 32px empty space at the
bottom of the NTP content area, removing the dependency on the cr-button
height.

Change-Id: Ib035affef92445d3c7f1effdc61b5daea108c4ae
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2638633
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845304}

chrome/browser/resources/new_tab_page/app.html

@@ -105,17 +105,13 @@
     display: none;
   }
 
-  #customizeButtonSpacer {
-    flex-grow: 1;
-  }
-
   #customizeButtonContainer {
     align-self: flex-end;
     background-color: var(--ntp-background-override-color);
     border-radius: calc(.5 * var(--cr-button-height));
     bottom: 16px;
     margin-inline-end: 16px;
-    position: sticky;
+    position: fixed;
   }
 
   :host([show-background-image_]) #customizeButtonContainer {
@@ -235,6 +231,12 @@
     font-size: .75rem;
   }
 
+  #contentBottomSpacer {
+    flex-shrink: 0;
+    height: 32px;
+    width: 1px;
+  }
+
   svg {
     position: fixed;
   }
@@ -287,7 +289,6 @@
           [[backgroundImageAttribution2_]]
         </div>
       </a>
-      <div id="customizeButtonSpacer"></div>
       <!-- cr-button has a transparent background. This leads to incorrect
            results when a custom background is set. Therefore, wrap customize
            button in container to enfore solid background color. -->
@@ -307,6 +308,7 @@
       </div>
     </template>
   </dom-if>
+  <div id="contentBottomSpacer"></div>
 </div>
 <dom-if if="[[showVoiceSearchOverlay_]]" restamp>
   <template>