Tweaks to the reply dialog to make it usable with drafts

+ Re-center once drafts have been loaded.
+ Clamp the drafts section so that it scrolls and doesn't
  push the action buttons off screen.
+ Allow the dialog a bit more width if it needs it.
+ Set a max-height of 90vh.

Change-Id: Ifae6d1ccfadcae38a3907c55bf3bab6e906a0472

polygerrit-ui/app/elements/gr-change-view.html

diff --git a/polygerrit-ui/app/elements/gr-change-view.html b/polygerrit-ui/app/elements/gr-change-view.html
index b8d8bfd..05eb709 100644
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@@ -87,7 +87,8 @@
         margin-left: var(--default-horizontal-margin);
       }
       gr-reply-dialog {
-        width: 30em;
+        min-width: 30em;
+        max-width: 50em;
       }
       .changeStatus {
         color: #999;
@@ -170,6 +171,7 @@
           margin-top: .5em;
         }
         gr-reply-dialog {
+          min-width: initial;
           width: 90vw;
         }
         .download {
@@ -447,7 +449,9 @@
       },
 
       _handleReplyOverlayOpen: function(e) {
-        this.$.replyDialog.reload();
+        this.$.replyDialog.reload().then(function() {
+          this.async(function() { this.$.replyOverlay.center() }, 1);
+        }.bind(this));
         this.$.replyDialog.focus();
       },
 

polygerrit-ui/app/elements/gr-reply-dialog.html

diff --git a/polygerrit-ui/app/elements/gr-reply-dialog.html b/polygerrit-ui/app/elements/gr-reply-dialog.html
index ed01928..ead001a 100644
--- a/polygerrit-ui/app/elements/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/gr-reply-dialog.html
@@ -26,6 +26,7 @@
   <style>
     :host {
       display: block;
+      max-height: 90vh;
     }
     :host([disabled]) {
       pointer-events: none;
@@ -33,10 +34,20 @@
     :host([disabled]) .container {
       opacity: .5;
     }
+    .container {
+      display: flex;
+      flex-direction: column;
+      max-height: 90vh;
+    }
     section {
       border-top: 1px solid #ddd;
       padding: .5em .75em;
     }
+    .textareaContainer,
+    .labelsContainer,
+    .actionsContainer {
+      flex-shrink: 0;
+    }
     .textareaContainer {
       position: relative;
     }
@@ -74,6 +85,9 @@
     iron-selector > gr-button.iron-selected {
       background-color: #ddd;
     }
+    .draftsContainer {
+      overflow-y: auto;
+    }
     .draftsContainer h3 {
       margin-top: .25em;
     }
@@ -98,9 +112,10 @@
             placeholder="Say something..."
             disabled="{{disabled}}"
             rows="4"
+            max-rows="15"
             bind-value="{{draft}}"></iron-autogrow-textarea>
       </section>
-      <section>
+      <section class="labelsContainer">
         <template is="dom-repeat"
             items="[[_computeLabelArray(permittedLabels)]]" as="label">
           <div class="labelContainer">
@@ -179,7 +194,7 @@
       },
 
       reload: function() {
-        this.$.draftsXHR.generateRequest();
+        return this.$.draftsXHR.generateRequest().completes;
       },
 
       focus: function() {