Make encryption migration UI shrinkable to fit in the screen resolution.

OOBE screens has min-height:640px. If a user changed the display setting to
lower resolution (e.g. 640x400), the bottom part of migration UI will be hidden.
This CL make the migration UI shrinkable based on the screen resolution to make
the "Update" button in the bottom always visible to the user.
(See attached screenshots on the bug.)

Since we don't have enough time to test it before M63 goes stable, this change
applies only to the migration screen to minimize the impact.
Other OOBE screens will be OK without the patch since users will see them before
they can change the display resolution.

Bug: 787393
Test: Manually tested on kevin by setting screen resolution to 640x400.
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I9d092deb556b8ca0beda6db39c35d48bff223b09
Reviewed-on: https://chromium-review.googlesource.com/800190
Commit-Queue: Naoki Fukino <fukino@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520830}

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

@@ -3,7 +3,12 @@
  * found in the LICENSE file. */
 
 oobe-dialog {
-  max-width: 768px;
+  height: 640px;
+  max-height: calc(100vh - 47px);  /* Subtracting #login-header-bar's height. */
+  max-width: 100vw;
+  min-height: 0 !important;  /* Making <oobe-dialog> shrinkable. */
+  min-width: 0 !important;  /* Making <oobe-dialog> shrinkable. */
+  width: 768px;
 }
 
 oobe-dialog div {
@@ -38,6 +43,10 @@ oobe-dialog > iron-icon.warning {
   background: url(chrome://oobe/product-logo.png) center/100% no-repeat;
 }
 
+.footer {
+  overflow: hidden;
+}
+
 .footer div {
   color: rgb(51, 51, 51);
   font-size: 13px;