fix modal height in mobile browsers

This commit is contained in:
Nolan Lawson 2018-02-22 20:04:19 -08:00
parent a73555dc46
commit f325bdfe9e
3 changed files with 10 additions and 11 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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>