scanning: Finalize responsiveness

Update responsive app dimensions to conform to the spec at
https://carbon.googleplex.com/cros-ux/pages/scanning/responsiveness.

Bug: 1059779
Change-Id: I2225a97125d33be917dce1e5945dfb6908e1ed6c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575738
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Auto-Submit: Jesse Schettler <jschettler@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833922}

chromeos/components/scanning/resources/scanning_app.html

@@ -46,15 +46,13 @@
     box-sizing: border-box;
     display: block;
     margin: 0 auto;
-    min-height: 480px;
-    min-width: 600px;
     position: relative;
     width: var(--container-width);
   }
 
   .left-panel {
-    padding-inline-end: var(--left-panel-padding-end);
-    padding-inline-start: var(--left-panel-padding-start);
+    margin-inline-end: var(--left-panel-margin-inline-end);
+    margin-inline-start: var(--left-panel-margin-inline-start);
     width: var(--left-panel-width);
   }
 
@@ -64,9 +62,10 @@
   }
 
   .right-panel {
-    margin-bottom: var(--right-panel-margin-bottom);
-    padding-inline-end: var(--right-panel-padding-end);
-    padding-inline-start: var(--right-panel-padding-start);
+    margin-inline-end: var(--right-panel-margin-inline-end);
+    margin-inline-start: var(--right-panel-margin-inline-start);
+    padding-inline-end: var(--right-panel-padding-inline-end);
+    padding-inline-start: var(--right-panel-padding-inline-start);
     width: var(--right-panel-width);
   }
 

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -15,45 +15,62 @@
       text-overflow: ellipsis;
     }
 
-    /* TODO(michaelcheco): Update once responsiveness spec is finalized. */
-    @media (min-width:600px) and (max-width: 767px) {
+    @media (min-width: 600px) {
       :host {
-        --container-width: 767px;
-        --left-panel-padding-end: 32px;
-        --left-panel-padding-start: 32px;
+        --container-width: 600px;
+        --left-panel-margin-inline-end: 10px;
+        --left-panel-margin-inline-start: 10px;
+        --left-panel-width: 200px;
+        --panel-container-margin-top: 20px;
+        --right-panel-margin-inline-end: 10px;
+        --right-panel-margin-inline-start: 0;
+        --right-panel-padding-inline-end: 8px;
+        --right-panel-padding-inline-start: 8px;
+        --right-panel-width: 370px;
+      }
+    }
+
+    @media (min-width: 768px) {
+      :host {
+        --container-width: 768px;
+        --left-panel-margin-inline-end: 32px;
+        --left-panel-margin-inline-start: 32px;
         --left-panel-width: 288px;
         --panel-container-margin-top: 20px;
-        --right-panel-margin-bottom: 20px;
-        --right-panel-padding-end: 32px;
-        --right-panel-padding-start: 0px;
+        --right-panel-margin-inline-end: 32px;
+        --right-panel-margin-inline-start: 0;
+        --right-panel-padding-inline-end: 16px;
+        --right-panel-padding-inline-start: 16px;
         --right-panel-width: 384px;
       }
     }
 
-    @media (min-width:768px) and (max-width: 1279px) {
+    @media (min-width: 960px) {
       :host {
         --container-width: 960px;
-        --left-panel-padding-end: 48px;
-        --left-panel-padding-start: 48px;
+        --left-panel-margin-inline-end: 48px;
+        --left-panel-margin-inline-start: 48px;
         --left-panel-width: 384px;
         --panel-container-margin-top: 20px;
-        --right-panel-margin-bottom: 32px;
-        --right-panel-padding-end: 48px;
-        --right-panel-padding-start: 48px;
+        --right-panel-margin-inline-end: 48px;
+        --right-panel-margin-inline-start: 48px;
+        --right-panel-padding-inline-end: 16px;
+        --right-panel-padding-inline-start: 16px;
         --right-panel-width: 384px;
       }
     }
 
-    @media (min-width:1280px) {
+    @media (min-width: 1280px) {
       :host {
         --container-width: 1280px;
-        --left-panel-padding-end: 60px;
-        --left-panel-padding-start: 164px;
+        --left-panel-margin-inline-end: 60px;
+        --left-panel-margin-inline-start: 164px;
         --left-panel-width: 416px;
         --panel-container-margin-top: 64px;
-        --right-panel-margin-bottom: 64px;
-        --right-panel-padding-end: 164px;
-        --right-panel-padding-start: 60px;
+        --right-panel-margin-inline-end: 164px;
+        --right-panel-margin-inline-start: 60px;
+        --right-panel-padding-inline-end: 32px;
+        --right-panel-padding-inline-start: 32px;
         --right-panel-width: 416px;
       }
     }