scanning: Fix max height of settings section

Change the max height of the settings section based on whether the More
settings section is expanded. This ensures the Scan button is positioned
correctly below the settings section.

Before and after: http://shortn/_iDTmWnZ6Aa

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

chromeos/components/scanning/resources/scanning_app.html

@@ -96,10 +96,17 @@
 
   #container {
     flex: 1;
-    max-height: 445px;
     overflow: overlay;
   }
 
+  :host([opened_]) #container {
+    max-height: 445px;
+  }
+
+  :host(:not([opened_])) #container {
+    max-height: 277px;
+  }
+
   .scan-button-container {
     display: flex;
     justify-content: flex-end;
@@ -185,13 +192,13 @@
                 selected-file-type="{{selectedFileType}}"></file-type-select>
             <div id="more-settings-line-separator"></div>
             <cr-button id="moreSettingsButton" on-click="toggleClicked_"
-                aria-expanded="[[opened]]"
+                aria-expanded="[[opened_]]"
                 disabled="[[settingsDisabled_]]">
               <span>[[i18n('moreSettings')]]</span>
-              <iron-icon icon="[[getArrowIcon_(opened)]]">
+              <iron-icon icon="[[getArrowIcon_(opened_)]]">
               </iron-icon>
             </cr-button>
-            <iron-collapse id="collapse" opened="{{opened}}">
+            <iron-collapse id="collapse" opened="{{opened_}}">
               <color-mode-select id="colorModeSelect"
                   color-modes="[[capabilities_.colorModes]]"
                   disabled="[[settingsDisabled_]]"

chromeos/components/scanning/resources/scanning_app.js

@@ -207,6 +207,16 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Indicates whether the More settings section is expanded.
+     * @private {boolean}
+     */
+    opened_: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
   },
 
   /** @override */
@@ -421,12 +431,11 @@ Polymer({
   },
 
   /**
-   * @param {boolean} opened Whether the section is expanded or not.
    * @return {string} Icon name.
    * @private
    */
-  getArrowIcon_(opened) {
-    return opened ? 'cr:expand-less' : 'cr:expand-more';
+  getArrowIcon_() {
+    return this.opened_ ? 'cr:expand-less' : 'cr:expand-more';
   },
 
   /**