OOBE: Adapt oobe popup to fit narrow screens

TBR=alemate@chromium.org

Bug: 1011753, 1001458
Change-Id: If4ae6081e3a76d5c55764b898e6d617709f2956e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1848379
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#705873}

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.css

@@ -12,11 +12,12 @@
 }
 
 .oobe-popup {
-  width: 640px;
+  max-width: 640px;
 }
 
 #webview-container {
-  width: 100%;
+  box-sizing: border-box;
+  padding: 16px;
 }
 
 #webview-container.overlay-loading > webview,
@@ -33,8 +34,6 @@
 #overlay-webview-loading {
   display: block;
   height: 300px;
-  margin: 16px;
-  width: 608px;
 }
 
 #overlay-close-button {

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html

@@ -31,10 +31,11 @@
     </oobe-dialog>
 
     <div id="third-party-overlay" class="popup-overlay" hidden>
-      <div id="overlay-container" class="oobe-popup not-resizable">
-        <div id="webview-container">
-          <webview id="overlay-webview"></webview>
-          <div id="overlay-webview-loading">
+      <div id="overlay-container" class="oobe-popup not-resizable layout
+          vertical">
+        <div id="webview-container" class="layout horizontal">
+          <webview id="overlay-webview" class="flex"></webview>
+          <div id="overlay-webview-loading" class="flex">
             <p i18n-content="assistantOobePopupOverlayLoading"></p>
           </div>
         </div>

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css

@@ -13,18 +13,18 @@
 }
 
 #value-prop-container {
-  border-right: 1px solid rgb(218, 220, 224);
+  border-inline-end: 1px solid rgb(218, 220, 224);
   width: 50%;
 }
 
 #consents-container {
-  padding-left: 24px;
+  padding-inline-start: 24px;
   width: 50%;
 }
 
 #user-name {
   color: #757575;
-  padding-left: 8px;
+  padding-inline-start: 8px;
 }
 
 #footer-text {
@@ -40,7 +40,7 @@
 .oobe-popup {
   border-radius: 8px;
   box-shadow: unset;
-  width: 512px;
+  max-width: 512px;
 }
 
 #overlay-text {
@@ -63,7 +63,7 @@
 }
 
 #overlay-close-button {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 
 #close-button-text {

chrome/browser/resources/chromeos/login/oobe_popup_overlay.css

@@ -18,14 +18,17 @@
   z-index: 5;
 }
 
+/* please use oobe-popup inside a popup-overlay only */
 .oobe-popup {
   background: white;
   border: 1px solid rgb(188, 193, 208);
   border-radius: 2px;
   box-shadow: 0 5px 80px #505050;
+  flex: 1 1 auto;
+  max-width: 460px;
   min-height: 250px;
+  min-width: 50px;
   position: relative;
-  width: 460px;
   z-index: 10;
 }
 

chrome/browser/resources/chromeos/login/screen_arc_terms_of_service.css

@@ -82,7 +82,7 @@ html[dir='rtl'] .arc-tos-overlay-close-top {
 }
 
 .arc-overlay-url .oobe-popup {
-  width: 640px;
+  max-width: 640px;
 }
 
 .arc-overlay-text #arc-tos-overlay-webview-container,