[CrOS Wallpaper] Fix chopped buttons when form factor is smaller.

Currently, when the device screen width is too small, associated
preview wallpaper buttons are chopped.  This CL ensures that they are
not, and keeps the preview navbar centered with css instead of js.

Before screenshot-
https://screenshot.googleplex.com/GEmgWH8EPu3

After screenshot-
https://screenshot.googleplex.com/e3icCqdwX3J

Bug: 1022743
Change-Id: I92f77c682a0395996066cb148d14428b21d487c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1907709
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714610}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

@@ -418,15 +418,22 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
   background-color: #fff;
   border-radius: 0 0 24px 24px;
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24), 0 0 24px rgba(0, 0, 0, 0.12);
-  display: flex;
+  display: inline-block;
   height: 48px;
-  position: absolute;
+  margin: 0 auto;
+  max-width: 100%;
   top: 0;
-  visibility: hidden;  /* Need this for correct positioning. */
 }
 
-.preview-mode:not(.wallpaper-set-successfully) #top-header {
-  visibility: visible;
+#top-header-container {
+  display: none;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.preview-mode:not(.wallpaper-set-successfully) #top-header-container {
+  display: inline-block;
 }
 
 .top-header-contents {
@@ -480,6 +487,7 @@ body:not([surprise-me-disabled]) [visibleif~='surprise-me-disabled'] {
   overflow: hidden;
   padding-inline-end: 16px;
   padding-inline-start: 8px;
+  text-align: initial;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -585,18 +593,15 @@ html[dir='rtl'] .top-header-contents .more-options {
   background-image: url(../images/ui/center_cropped_layout_disabled.svg);
 }
 
-.top-header-contents #confirm-preview-wallpaper {
-  margin-inline-start: 96px;
+.top-header-contents #confirm-preview-wallpaper,
+.top-header-contents #refresh-wallpaper {
+  margin-inline-start: 16px;
 }
 
 .daily-wallpaper .top-header-contents #confirm-preview-wallpaper {
   margin-inline-start: 8px;
 }
 
-.top-header-contents #refresh-wallpaper {
-  margin-inline-start: 16px;
-}
-
 .preview-mode.custom-wallpaper .more-options .custom-option,
 .preview-mode.daily-wallpaper .more-options .daily-option,
 .preview-mode:not(.custom-wallpaper):not(.daily-option) .more-options :not(.custom-option):not(.daily-option) {
@@ -868,7 +873,6 @@ html[dir='rtl'] .top-header-contents .more-options {
   border-radius: 16px;
   color: #fff;
   display: inline-block;
-  left: 50%;
   margin: 0 auto;
   max-width: 90%;
   padding: 8px 28px;

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

@@ -307,7 +307,6 @@ WallpaperManager.prototype.placeWallpaperPicker_ = function() {
 
   var totalWidth = this.document_.body.offsetWidth;
   var totalHeight = this.document_.body.offsetHeight;
-  centerElement($('top-header'), totalWidth, null);
   centerElement($('preview-spinner'), totalWidth, totalHeight);
 
   centerElement(

chrome/browser/resources/chromeos/wallpaper_manager/main.html

@@ -157,28 +157,30 @@ found in the LICENSE file.
       </div>
     </div>
   </div>
-  <div id="top-header">
-    <div class="top-header-contents">
-      <div id="cancel-preview-wallpaper" i18n-values="title:backButton"
-          class="preview-option"></div>
-      <div id="image-title"></div>
-      <div class="divider"></div>
-      <div id="wallpaper-description"></div>
-      <div class="more-options">
-        <div id="centering-options" class="custom-option">
-          <div id="center-button">
-            <div class="icon"></div>
-            <div class="text" i18n-content="centerLayout"></div>
-          </div>
-          <div id="center-cropped-button">
-            <div class="icon"></div>
-            <div class="text" i18n-content="centerCroppedLayout"></div>
+  <div id="top-header-container">
+    <div id="top-header">
+      <div class="top-header-contents">
+        <div id="cancel-preview-wallpaper" i18n-values="title:backButton"
+            class="preview-option"></div>
+        <div id="image-title"></div>
+        <div class="divider"></div>
+        <div id="wallpaper-description"></div>
+        <div class="more-options">
+          <div id="centering-options" class="custom-option">
+            <div id="center-button">
+              <div class="icon"></div>
+              <div class="text" i18n-content="centerLayout"></div>
+            </div>
+            <div id="center-cropped-button">
+              <div class="icon"></div>
+              <div class="text" i18n-content="centerCroppedLayout"></div>
+            </div>
           </div>
+          <div id="refresh-wallpaper" class="daily-option"
+              i18n-content="refreshLabel"></div>
+          <div id="confirm-preview-wallpaper" class="preview-option"
+              i18n-content="confirmPreviewLabel"></div>
         </div>
-        <div id="refresh-wallpaper" class="daily-option"
-            i18n-content="refreshLabel"></div>
-        <div id="confirm-preview-wallpaper" class="preview-option"
-            i18n-content="confirmPreviewLabel"></div>
       </div>
     </div>
   </div>