From f325bdfe9e84879ef178d99c51d138616f32970f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 22 Feb 2018 20:04:19 -0800
Subject: [PATCH] fix modal height in mobile browsers

---
 routes/_components/dialog/ImageDialog.html |  4 ++--
 routes/_components/dialog/ModalDialog.html | 13 ++++++-------
 routes/_components/dialog/VideoDialog.html |  4 ++--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/routes/_components/dialog/ImageDialog.html b/routes/_components/dialog/ImageDialog.html
index ff7f257..f59aaf9 100644
--- a/routes/_components/dialog/ImageDialog.html
+++ b/routes/_components/dialog/ImageDialog.html
@@ -23,9 +23,9 @@
 <style>
   :global(#modal-dialog img, #modal-dialog video) {
     object-fit: contain;
-    overflow: hidden;
     max-width: calc(100vw - 20px);
-    max-height: calc(100vh - 100px);
+    max-height: calc(100% - 20px);
+    overflow: hidden;
   }
 </style>
 <script>
diff --git a/routes/_components/dialog/ModalDialog.html b/routes/_components/dialog/ModalDialog.html
index 6e8cf1a..9959bc7 100644
--- a/routes/_components/dialog/ModalDialog.html
+++ b/routes/_components/dialog/ModalDialog.html
@@ -6,9 +6,7 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
-    <div class="modal-dialog-slot">
-      <slot></slot>
-    </div>
+    <slot></slot>
   </div>
 </div>
 <style>
@@ -33,13 +31,18 @@
     padding: 0;
     border: 1px solid var(--main-border);
     border-radius: 2px;
+    display: flex;
+    flex-direction: row;
+    max-height: calc(100% - 20px);
   }
+
   .modal-dialog-document {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     max-width: calc(100vw - 20px);
+    flex: 1;
   }
   .close-dialog-button-wrapper {
     text-align: right;
@@ -57,10 +60,6 @@
     color: var(--button-primary-text);
   }
 
-  .modal-dialog-slot {
-    max-width: 100%;
-  }
-
   @media (max-width: 767px) {
     .close-dialog-button span {
       padding: 0 10px 4px;
diff --git a/routes/_components/dialog/VideoDialog.html b/routes/_components/dialog/VideoDialog.html
index abe7d8d..cb91a97 100644
--- a/routes/_components/dialog/VideoDialog.html
+++ b/routes/_components/dialog/VideoDialog.html
@@ -10,9 +10,9 @@
 <style>
   :global(#modal-dialog video) {
     object-fit: contain;
-    overflow: hidden;
     max-width: calc(100vw - 20px);
-    max-height: calc(100vh - 100px);
+    max-height: calc(100% - 20px);
+    overflow: hidden;
   }
 </style>
 <script>