fix: media modal uses full height on mobile (#1481)

fixes #1465
This commit is contained in:
Nolan Lawson 2019-09-13 22:11:22 -07:00 committed by GitHub
parent 97af0ccdf0
commit dbb746ff34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions

View File

@ -86,11 +86,11 @@
<Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
<style>
:global(.media-modal-dialog) {
max-width: calc(100%);
max-width: 100%;
}
.media-container {
height: calc(100% - 64px); /* 44px X button height + 20px padding */
width: calc(100vw);
width: 100vw;
display: flex;
flex-direction: column;
}
@ -196,8 +196,15 @@
.media-scroll-item {
scroll-snap-coordinate: 0 0;
}
}
@media (max-width: 767px) {
.media-container {
height: calc(100vh - 64px);
}
}
</style>
<script>
import ModalDialog from './ModalDialog.html'