From 4dce5fab4786cce49181e5b6ff57f038e79aedce Mon Sep 17 00:00:00 2001 From: sg00dwin Date: Tue, 26 Feb 2019 13:53:45 -0500 Subject: [PATCH] Adjust modal height at landscape so that buttons aren't beneath viewport. Fixes https://jira.coreos.com/browse/CONSOLE-658 --- frontend/public/components/modals/_modals.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss index 0edac8202d0..ca4294edf5b 100644 --- a/frontend/public/components/modals/_modals.scss +++ b/frontend/public/components/modals/_modals.scss @@ -82,8 +82,8 @@ height: calc(100% - 20px); // subtract height margin-top 10px + margin-bottom 10px outline: 0; - @media(min-width: $screen-sm-min) { - height: calc(100% - 60px); // subtract height margin-top 30px + margin-bottom 30px + @media(min-width: $screen-sm-min), (max-width: $screen-xs-max) and (orientation: landscape) { + height: calc(100% - 60px); // At desktop, subtract margin-top 30px + margin-bottom 30px OR in the case of mobile landscape orientation, subtract the height of ios url control bar, since its height is not taken into account when the viewport height is calculated on initial page load. This causes the modal to extend below the viewport and hide modal-footer buttons. } }