[CrOS Settings] Align OsSettingsSearchBox correctly for RTL languages.

Impacted -
Arabic: https://nimb.ws/VMt1LI
Hebrew: https://nimb.ws/f36byI

Reference (unchanged) -
English: https://nimb.ws/XFKJwq

With regard to the placement of the dropdown -
* left:0 is not needed at all - it is ignored in both ltr/rtl and struck
  out in the inspector.
* right:0 causes the iron-dropdown to align to the right hand side of
  the window for rtl languages

With regard to the click-ability of the burger icon
* In rtl, #leftSpacer is covered by #centeredContent, so the
  burger icon is not clickable because #centeredContent is set at
  width 100% to accurately center the search box in narrow mode. A
  z-index of -1 is applied to #centeredContent narrow mode in order
  to place it beneath the #leftSpacer. #centerContent was set to 100%
  in order to avoid the use of CSS translate transform,
  which would remove the need for a child to be centered based off
  the positioning of its parent which varies since OsToolbar shifts
  based off of the width of the window. Using that property was
  hard to follow, so I decided against it in [1].
* The width of the #leftSpacer is shrunk to 20px in narrow mode
  so that it does not overlap with the OsSettingsSearchBox in any
  width, so that any part of the CrToolbarSearchField is
  clickable.

[1] https://chromium-review.googlesource.com/c/chromium/src/+/2337277

Bug: 1119638
Change-Id: I5c609f68b4ad0a8d4c4b89b12b1cf4dcc2a1d06a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2365974Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800177}

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

@@ -91,9 +91,7 @@
       }
 
       iron-dropdown {
-        left: 0;
         margin-top: 74px;
-        right: 0;
       }
 
       iron-dropdown [slot='dropdown-content'] {

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

@@ -59,6 +59,10 @@
         width: var(--settings-menu-width);
       }
 
+      :host([narrow]) #leftSpacer {
+        width: 20px;
+      }
+
       cr-icon-button {
         --cr-icon-button-fill-color: currentColor;
         --cr-icon-button-size: 32px;
@@ -78,6 +82,8 @@
       :host([narrow]) #centeredContent {
         position: absolute;
         width: 100%;
+        /* #centeredContent should always be below #leftContent */
+        z-index: -1;
       }
 
       :host([narrow]:not([showing-search_])) #centeredContent {