Improve the EduCoexisistence ui

This cl updates the css and style related javascript code
to ensure that:
1. we provide the right amount of space for the online flow.
2. the buttons are appropriately positioned.

Screenshots:
1. Error page in-session: https://screenshot.googleplex.com/BurFBisi6LzZXmh
2. Gaia in oobe: https://screenshot.googleplex.com/8gnN8kGjdKbXQAL
3. Gaia in add person flow:  https://screenshot.googleplex.com/7yqbR6d278rA3vv
3. Gaia in session: https://screenshot.googleplex.com/53mkzXwjzAxN6tb
Bug: 1143470

Change-Id: Ic6228c2dbb11a5848971375b7a7c669d3479f6ba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2523727Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Aga Wronska <agawronska@chromium.org>
Commit-Queue: Yilkal Abe <yilkal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826467}

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_button.html

-<style>
-  :host([button-type='ok']) cr-button {
-    position: absolute;
-  }
-
-  :host([button-type='back']) cr-button {
-    position: absolute;
-  }
-</style>
 <cr-button class$="[[getClass_(buttonType)]]" on-tap="onTap_"
     disabled="[[disabled]]">
   <template is="dom-if" if="[[hasIconBeforeText_(buttonType)]]">

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_css.html

@@ -62,9 +62,11 @@
     }
 
     .main-padding {
+      height: calc(100% - calc(64px -var(--dialog-top-border-size)));
       padding-inline-end: 64px;
       padding-inline-start: 64px;
       padding-top: calc(64px - var(--dialog-top-border-size));
+      width: 100%;
     }
 
     .text-elide {
@@ -94,14 +96,21 @@
       flex-shrink: 0;
     }
 
+    .buttons-layout {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
     span[slot='buttons'] {
       display: flex;
       width: 100%;
     }
 
-    edu-login-button[button-type='ok'],
-    edu-login-button[button-type='back'] {
+    edu-coexistence-button[button-type='back'] {
       margin-inline-start: auto;
     }
+
   </style>
 </template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_error.html

@@ -14,6 +14,12 @@
     </div>
   </span>
   <span slot="buttons">
-    <edu-coexistence-button button-type="action">
+    <div class = "buttons-layout">
+      <span></span>
+      <span>
+        <edu-coexistence-button button-type="action">
+        </edu-coexistence-button>
+      </span>
+    </div>
   </span>
 </edu-coexistence-template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_offline.html

@@ -14,6 +14,12 @@
     </div>
   </span>
   <span slot="buttons">
-    <edu-coexistence-button button-type="action">
+    <div class="buttons-layout">
+      <span></span>
+      <span>
+        <edu-coexistence-button button-type="action">
+        </edu-coexistence-button>
+      </span>
+    </div>
   </span>
 </edu-coexistence-template>

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_template.html

@@ -23,26 +23,26 @@
     width: 100%;
   }
 
-  @media (orientation: landscape) {
-    .content-container {
+  .content-container {
       align-items: stretch;
       height: 100%;
-      max-height: 900px;
-      max-width: 1400px;
+      max-width: 768px;
       width: 100%;
+  }
+
+  @media (orientation: landscape) {
+    .content-container {
+       max-height: 640px;
     }
   }
-  
+
   @media (orientation: portrait) {
     .content-container {
-      align-items: stretch;
-      height: 50%;
-      max-height: 900px;
-      max-width: 1400px;
-      width: 100%;
+      max-height: 768px;
     }
   }
 
+
   .main[scrollable].can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
     background: var(--background-gradient-0);
   }

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.html

 <style include="edu-coexistence-css">
-  .buttons {
-     width: 100%;
-  }
-
-  gaia-action-buttons {
-    padding-inline-start: 85%;
-  }
 </style>
 
 <edu-coexistence-template>
   <span slot="main">
-    <div class="container">
      <webview id="signinFrame" hidden$="[[loading_]]" class="signin-frame"
               allowscaling></webview>
-    </div>
   </span>
   <span slot="buttons">
-    <div class="buttons" hidden$="[[!showGaiaButtons_]]">
-      <div class="action-buttons">
+    <div class="buttons-layout" hidden$="[[!showGaiaButtons_]]">
         <span>
           <edu-coexistence-button button-type="back"
             on-go-back="handleGaiaLoginGoBack_">
           </edu-coexistence-button>
         </span>
-        <gaia-action-buttons authenticator="[[controller_.authExtHost_]]" 
-          hidden$="[[!showGaiaNextButton_]]">
-        </gaia-action-buttons>
-      </div>
+        <span>
+          <gaia-action-buttons id = "gaiaNextButton"
+            authenticator="[[controller_.authExtHost_]]"
+            hidden$="[[!showGaiaNextButton_]]">
+          </gaia-action-buttons>
+        </span>
     </div>
   </span>
 

chrome/browser/resources/chromeos/edu_coexistence/edu_coexistence_ui.js

@@ -93,18 +93,13 @@ Polymer({
    */
   configureUiForGaiaFlow(currentUrl) {
     var mainDiv = this.$$('edu-coexistence-template').$$('div.main');
-    var contentDiv =
-        this.$$('edu-coexistence-template').$$('div.content-container');
 
     if (currentUrl.hostname !== this.controller_.getFlowOriginHostname()) {
       // Show the GAIA Buttons.
       this.showGaiaButtons_ = true;
       // Shrink the main div so that the buttons line up more closely with the
       // server rendered buttons.
-      mainDiv.style.height = '80%';
-
-      // GAIA login renders better with this width constraint.
-      contentDiv.style.maxWidth = '900px';
+      mainDiv.style.height = 'calc(100% - 90px)';
 
       // Don't show the "Next" button if the EDU authentication got forwarded to
       // a non-Google SSO page.
@@ -117,9 +112,6 @@ Polymer({
       // Hide the GAIA Next button.
       this.showGaiaNextButton_ = false;
 
-      // Undo the GAIA login width constraint set above.
-      contentDiv.style.maxWidth = '1400px';
-
       // Restore the main div to 100%
       mainDiv.style.height = '100%';
     }