Reposition dropdown element in cr-searchable-drop-down

Move the iron-dropdown element into the "suffix" slot of the cr-input.
This allows for precise positioning of the dropdown element relative to
the actual input field, as opposed to the cr-input as a whole (including
label and error message).

This change has two benefits:
1. It will allow the dropdown to be positioned immediately below the
   input, which is necessary to implement an updated UX.
2. It allows the dropdown position to properly adapt to changes in font
   size setting.

BUG=977313,982230

Change-Id: I868063d9074ec8203b7c4f29c5d635be25a58412
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1727550Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Anand Mistry <amistry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683909}

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

@@ -30,7 +30,7 @@
         padding: 8px 0;
       }
 
-      #progress-container {
+      #input-overlay {
         border-radius: 4px;
         height: 100%;
         left: 0;
@@ -41,6 +41,19 @@
         width: 100%;
       }
 
+      #input-box {
+        height: 100%;
+        left: 0;
+        pointer-events: none;
+        top: 0;
+        width: 100%;
+      }
+
+      #dropdown-box {
+        pointer-events: initial;
+        width: 100%;
+      }
+
       paper-progress {
         --paper-progress-active-color: var(--google-blue-600);
         --paper-progress-height: 2px;
@@ -74,20 +87,24 @@
         placeholder="[[placeholder]]" readonly="[[readonly]]"
         error-message="[[getErrorMessage_(errorMessage, errorMessageAllowed)]]"
         invalid="[[shouldShowErrorMessage_(errorMessage, errorMessageAllowed)]]">
-      <div id="progress-container" slot="suffix">
-        <paper-progress id="loading" indeterminate hidden="[[!showLoading]]">
-        </paper-progress>
+      <div id="input-overlay" slot="suffix">
+        <div id="input-box">
+          <paper-progress id="loading" indeterminate hidden="[[!showLoading]]">
+          </paper-progress>
+        </div>
+        <div id="dropdown-box">
+          <iron-dropdown horizontal-align="left" vertical-align="top"
+              vertical-offset="4">
+            <div slot="dropdown-content">
+              <template is="dom-repeat" items="[[items]]"
+                  filter="[[filterItems_(searchTerm_)]]">
+                <button class="list-item" on-click="onSelect_">[[item]]</button>
+              </template>
+            </div>
+          </iron-dropdown>
+        </div>
       </div>
     </cr-input>
-    <iron-dropdown horizontal-align="left" vertical-align="top"
-        vertical-offset="52">
-      <div slot="dropdown-content">
-        <template is="dom-repeat" items="[[items]]"
-            filter="[[filterItems_(searchTerm_)]]">
-          <button class="list-item" on-click="onSelect_">[[item]]</button>
-        </template>
-      </div>
-    </iron-dropdown>
   </template>
   <script src="cr_searchable_drop_down.js"></script>
 </dom-module>