[OsSettingsSearch] Fix padding/margin for narrow and no search results.

* Narrow mode search icon spacing aligns with search input icon spacing.
* No search results aligns with search input text.

Screenshot:
https://screenshot.googleplex.com/cMF7bYjHk7g results aligned
https://screenshot.googleplex.com/DJuWA95Bmhf no results aligned

Fixed: 1090166
Change-Id: I6d4ea54e0f54c1ad2f0ab8b7249947c862a39b5f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2242842Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779121}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -22,6 +22,7 @@
         --cr-toolbar-focused-min-height: 48px;
         --cr-toolbar-icon-container-size: 32px;
         --cr-toolbar-icon-margin: 8px;
+        --cr-toolbar-search-icon-margin-inline-start: 8px;
         --cr-toolbar-query-exists-min-height:
             var(--cr-toolbar-focused-min-height);
         --separator-height: 8px;
@@ -40,8 +41,8 @@
       :host([narrow][showing-search]) {
         flex-basis: 100%;
         justify-content: center;
-        padding-inline-end: 24px;
-        padding-inline-start: 24px;
+        padding-inline-end: 14px;
+        padding-inline-start: 14px;
       }
 
       cr-toolbar-search-field {
@@ -76,8 +77,8 @@
 
       :host([narrow]) iron-dropdown {
         left: 0;
-        margin-inline-end: 24px;
-        margin-inline-start: 24px;
+        margin-inline-end: 14px;
+        margin-inline-start: 14px;
         right: 0;
       }
 
@@ -105,23 +106,12 @@
         max-height: 50vh;
       }
 
-      :host([narrow]) os-search-result-row {
-        --cr-toolbar-icon-margin: 6px 12px 6px 18px;
-      }
-
       #noSearchResultsContainer {
         height: 24px;
+        margin-inline-start: 48px;
         margin-top: var(--separator-height);
       }
 
-      :host(:not([narrow])) #noSearchResultsContainer {
-        margin-inline-start: 56px;
-      }
-
-      :host([narrow]) #noSearchResultsContainer {
-        margin-inline-start: 62px;
-      }
-
       /* The separator covers the top box shadow of the dropdown so that
        * var(--cr-menu-shadow) can be used instead of custom values. */
       .separator {

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -163,7 +163,9 @@
 
       :host([narrow][showing-search]) #icon,
       :host([narrow][showing-search]) paper-spinner-lite {
-        margin-inline-start: 18px;  /* Line up with Menu icon. */
+        /* 18px to line up with the Menu icon by default. */
+        margin-inline-start:
+            var(--cr-toolbar-search-icon-margin-inline-start, 18px);
       }
     </style>
     <template is="dom-if" id="spinnerTemplate">