fix modal height in mobile browsers

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>

routes/_components/dialog/ModalDialog.html

@@ -6,11 +6,9 @@
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
-    <div class="modal-dialog-slot">
     <slot></slot>
   </div>
 </div>
-</div>
 <style>
   :global(#modal-dialog[aria-hidden='true']) {
     display: none;
@@ -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;

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>