Fix apply fix dialog layout issue

1. Update flex layout with overflow on main content area
while footer and header will always show
2. For apply fix dialog, when diff context expanded,
re-center the overlay

Change-Id: I5f934015b612f3a4cd5bb64c13e3c172580a626a

polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.html

@@ -67,10 +67,10 @@ limitations under the License.
             </div>
             <div class="diffContainer">
               <gr-diff
-              prefs="[[overridePartialPrefs(prefs)]]"
-              change-num="[[changeNum]]"
-              path="[[item.filepath]]"
-              diff="[[item.preview]]"></gr-diff>
+                prefs="[[overridePartialPrefs(prefs)]]"
+                change-num="[[changeNum]]"
+                path="[[item.filepath]]"
+                diff="[[item.preview]]"></gr-diff>
             </div>
           </template>
         </div>

polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.js

@@ -75,6 +75,18 @@
           });
     },
 
+    attached() {
+      this.refitOverlay = () => {
+        // re-center the dialog as content changed
+        this.$.applyFixOverlay.fire('iron-resize');
+      };
+      this.addEventListener('diff-context-expanded', this.refitOverlay);
+    },
+
+    detached() {
+      this.removeEventListener('diff-context-expanded', this.refitOverlay);
+    },
+
     _showSelectedFixSuggestion(fixSuggestion) {
       this._currentFix = fixSuggestion;
       return this._fetchFixPreview(fixSuggestion.fix_id);

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

@@ -27,6 +27,7 @@ limitations under the License.
         color: var(--primary-text-color);
         display: block;
         max-height: 90vh;
+        overflow: auto;
       }
       .container {
         display: flex;
@@ -42,6 +43,13 @@ limitations under the License.
         display: flex;
         flex-shrink: 1;
         width: 100%;
+        flex: 1;
+        /* IMPORTANT: required for firefox */
+        min-height: 0px;
+      }
+      main .overflow-container {
+        flex: 1;
+        overflow: auto;
       }
       footer {
         display: flex;
@@ -58,7 +66,11 @@ limitations under the License.
     </style>
     <div class="container" on-keydown="_handleKeydown">
       <header class="font-h3"><slot name="header"></slot></header>
-      <main><slot name="main"></slot></main>
+      <main>
+        <div class="overflow-container">
+          <slot name="main"></slot>
+        </div>
+      </main>
       <footer>
         <slot name="footer"></slot>
         <gr-button id="cancel" class$="[[_computeCancelClass(cancelLabel)]]" link on-click="_handleCancelTap">