fix modal height in mobile browsers
This commit is contained in:
parent
a73555dc46
commit
f325bdfe9e
|
@ -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>
|
||||
|
|
|
@ -6,9 +6,7 @@
|
|||
<span aria-hidden="true">×</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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue