[realbox] Improves support for larger minimum font sizes

Settings the line-height CSS property can result in unappealing outcomes
such as characters appearing chopped off. By default, line-height is
calculated based on the font size, font family and other factors such as
presence of italic text etc.

This CL eliminates uses of line-height in the realbox in order to better
support larger minimum font sizes. The following are screenshots of the
realbox with "tiny" (default) and "huge" (maximum) minimum font sizes.

before (tiny): screenshot/6GZeMfLZEejVEG7
before (huge): screenshot/A8nt8ynzpG4yeKF

after (tiny): screenshot/BNyDMfRYbuum8AK
after (huge): screenshot/9TdmkQoswconjv4

Fixed: 1145840, 1051865
Change-Id: Ia24c8f44cf9f97ed6345c7f0064178dde525b3cd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2561580Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832017}

chrome/browser/resources/new_tab_page/realbox_dropdown.html

 <style>
+  :host {
+    font-size: 16px;
+  }
+
   #selector {
     background-color: var(--search-box-results-bg, white);
     border-radius: calc(0.25 * var(--ntp-realbox-height));
@@ -27,9 +31,8 @@
   .header .text {
     color: var(--search-box-results-dim, var(--google-grey-refresh-700));
     cursor: default;
-    font-size: 14px;
+    font-size: .875em;
     font-weight: 500;
-    line-height: 16px;
     overflow: hidden;
     padding-inline-end: 8px;
     text-overflow: ellipsis;

chrome/browser/resources/new_tab_page/realbox_match.html

@@ -3,8 +3,6 @@
     align-items: center;
     cursor: default;
     display: flex;
-    font-size: 16px;
-    line-height: 1;
     outline: none;
     padding-bottom: 6px;
     padding-inline-end: 16px;
@@ -46,9 +44,7 @@
   }
 
   :host([has-image]) #description {
-    font-size: 14px;
-    line-height: 16px;
-    margin-top: 2px;
+    font-size: .875em;
     width: 100%;
   }