From b3ef24e21d83fb7723280c1f9ad5d92bb695e52c Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Fri, 28 Oct 2016 10:26:40 -0700
Subject: [PATCH] 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
---
 .../gr-confirm-abandon-dialog.html            |  5 ++++
 .../gr-confirm-cherrypick-dialog.html         |  7 +++++
 .../gr-confirm-dialog/gr-confirm-dialog.html  | 29 +++++++++++++++----
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html b/polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html
index 7366d7448d..ea65c010b6 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html
+++ b/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;
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.html b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.html
index b21575bb5c..ae738e5979 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.html
+++ b/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>
diff --git a/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html b/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
index d8fc1df84b..54fddf5964 100644
--- a/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
+++ b/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>
-    <main><content select=".main"></content></main>
-    <footer>
-      <gr-button primary on-tap="_handleConfirmTap">[[confirmLabel]]</gr-button>
-      <gr-button on-tap="_handleCancelTap">Cancel</gr-button>
-    </footer>
+    <div class="container">
+      <header><content select=".header"></content></header>
+      <main><content select=".main"></content></main>
+      <footer>
+        <gr-button primary on-tap="_handleConfirmTap">
+          [[confirmLabel]]
+        </gr-button>
+        <gr-button on-tap="_handleCancelTap">Cancel</gr-button>
+      </footer>
+    </div>
   </template>
   <script src="gr-confirm-dialog.js"></script>
 </dom-module>