[webui][ntp] Align doodle at bottom if boxed

Implements the latest UX spec for boxed doodles. See crbug/1032312 for
details.

Bug: 688960
Change-Id: I03898db33822a19412d88c33414644a470e28c1e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2261722
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781984}

chrome/browser/resources/new_tab_page/logo.html

 <style include="cr-hidden-style">
   :host {
     --ntp-logo-height: 230px;
-    --ntp-logo-vertical-box-padding: 16px;
     display: inline-block;
     flex-shrink: 0;
     min-height: var(--ntp-logo-height);
@@ -32,6 +31,10 @@
     justify-content: center;
   }
 
+  :host([doodle-boxed_]) #doodle {
+    justify-content: flex-end;
+  }
+
   #imageDoodle {
     cursor: pointer;
     outline: none;
@@ -40,7 +43,8 @@
   :host([doodle-boxed_]) #imageDoodle {
     background-color: var(--ntp-logo-box-color);
     border-radius: 20px;
-    padding: var(--ntp-logo-vertical-box-padding) 24px;
+    margin-bottom: 30px;
+    padding: 16px 24px;
   }
 
   :host-context(.focus-outline-visible) #imageDoodle:focus {
@@ -60,8 +64,7 @@
   }
 
   :host([doodle-boxed_]) #image {
-    max-height: calc(
-        var(--ntp-logo-height) - 2 * var(--ntp-logo-vertical-box-padding));
+    max-height: 160px;
   }
 
   #animation {