Employ flexbox for auto-resizing of textareas

This change sets 'display: flex' and 'flex-direction: column' on the
main child of gr-overlay to allow for scrolling and auto resizing of
textareas when necessary, i.e. small viewports.

Bug: Issue 4833
Change-Id: I5a073822691bd766336da1058658e3bbb5f108f5

polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html

@@ -28,6 +28,11 @@ limitations under the License.
         opacity: .5;
         pointer-events: none;
       }
+      .main {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
       label {
         cursor: pointer;
         display: block;

polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.html

@@ -35,6 +35,11 @@ limitations under the License.
       iron-autogrow-textarea {
         padding: 0;
       }
+      .main {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
       .main label,
       .main input[type="text"] {
         display: block;
@@ -66,6 +71,8 @@ limitations under the License.
         <iron-autogrow-textarea
             id="messageInput"
             class="message"
+            rows="4"
+            max-rows="15"
             bind-value="{{message}}"></iron-autogrow-textarea>
       </div>
     </gr-confirm-dialog>

polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html

@@ -22,11 +22,23 @@ limitations under the License.
     <style>
       :host {
         display: block;
+        max-height: 90vh;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        max-height: 90vh;
       }
       header {
         border-bottom: 1px solid #ddd;
+        flex-shrink: 0;
         font-weight: bold;
       }
+      main {
+        display: flex;
+        flex-shrink: 1;
+        width: 100%;
+      }
       header,
       main,
       footer {
@@ -34,15 +46,20 @@ limitations under the License.
       }
       footer {
         display: flex;
+        flex-shrink: 0;
         justify-content: space-between;
       }
     </style>
-    <header><content select=".header"></content></header>
+    <div class="container">
-    <main><content select=".main"></content></main>
+      <header><content select=".header"></content></header>
-    <footer>
+      <main><content select=".main"></content></main>
-      <gr-button primary on-tap="_handleConfirmTap">[[confirmLabel]]</gr-button>
+      <footer>
-      <gr-button on-tap="_handleCancelTap">Cancel</gr-button>
+        <gr-button primary on-tap="_handleConfirmTap">
-    </footer>
+          [[confirmLabel]]
+        </gr-button>
+        <gr-button on-tap="_handleCancelTap">Cancel</gr-button>
+      </footer>
+    </div>
   </template>
   <script src="gr-confirm-dialog.js"></script>
 </dom-module>