From d6fb4f93ada572d4130fce069bae79b24c4c5aa7 Mon Sep 17 00:00:00 2001
From: Becky Siegel <beckysiegel@google.com>
Date: Fri, 18 Nov 2016 15:39:46 -0800
Subject: [PATCH] Fix reply dialog overlay on Android

Previously, on Android devices, when the gr-reply-dialog overlay is
opene, important contents could get cut off, including the submit and
cancel buttons. This change makes the reply dialog scrollable and full
width on small screens.  The max-height is also 100% so if scrolling is
required, the overlay will appear full screen.

Bug: Issue 4944
Change-Id: Ibf265a3039129363e479cbb3c29cb887aa23d889
---
 .../elements/change/gr-change-view/gr-change-view.html    | 6 +++++-
 .../elements/change/gr-reply-dialog/gr-reply-dialog.html  | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index ccbf5a99d5..c1f9e2b728 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -177,7 +177,7 @@ limitations under the License.
         }
         gr-reply-dialog {
           min-width: initial;
-          width: 90vw;
+          width: 100vw;
         }
         .downloadContainer {
           display: none;
@@ -213,6 +213,9 @@ limitations under the License.
           flex: initial;
           margin-right: 0;
         }
+        .scrollable {
+          @apply(--layout-scroll);
+        }
       }
     </style>
     <div class="container loading" hidden$="[[!_loading]]">Loading...</div>
@@ -348,6 +351,7 @@ limitations under the License.
           on-close="_handleDownloadDialogClose"></gr-download-dialog>
     </gr-overlay>
     <gr-overlay id="replyOverlay"
+        class="scrollable"
         no-cancel-on-outside-click
         on-iron-overlay-opened="_handleReplyOverlayOpen"
         with-backdrop>
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
index 761f0a5b00..7c62e8a37c 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
@@ -138,6 +138,14 @@ limitations under the License.
       .action:visited {
         color: #00e;
       }
+      @media screen and (max-width: 50em) {
+        :host {
+          max-height: none;
+        }
+        .container {
+          max-height: none;
+        }
+      }
     </style>
     <div class="container">
       <section class="peopleContainer">