OOBE Multidevice: Adapt the dialog size for different screen sizes

Bug: 1002100
Change-Id: I64fc0840356c189f9c02be5d89ebb24ddb7817f2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1845220
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704201}

chrome/browser/resources/chromeos/login/multidevice_setup_first_run.html

@@ -29,6 +29,11 @@
   <template>
     <link rel="stylesheet" href="oobe_popup_overlay.css">
     <style include="shared-style multidevice-setup-shared ">
+      multidevice-setup {
+        --multidevice-setup-height: var(--oobe-dialog-host-height);
+        --multidevice-setup-width: var(--oobe-dialog-host-width);
+      }
+
       #multidevice-help-overlay-container {
         width: 768px;
       }

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_post_oobe.html

@@ -10,6 +10,11 @@
 <dom-module id="multidevice-setup-post-oobe">
   <template>
     <style include="multidevice-setup-shared">
+      multidevice-setup {
+        --multidevice-setup-height: 640px;
+        --multidevice-setup-width: 768px;
+      }
+
       #backward-button,
       #cancel-button,
       #forward-button {

ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html

@@ -20,14 +20,15 @@
         box-sizing: border-box;
         color: var(--google-grey-700);
         font-size: 13px;
-        height: 640px;
+        height: var(--multidevice-setup-height, 640px);
         line-height: 16px;
         margin: auto;
         padding: 60px 32px 32px 32px;
-        width: 768px;
+        width: var(--multidevice-setup-width, 768px);
       }
 
       iron-pages {
+        overflow: auto;
         padding: 0 32px;
       }
     </style>