diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 802a60b3..ac9646a9 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -188,9 +188,21 @@ $modal-view-button-icon-margin: 0.5em; overflow-y: auto; min-height: 1em; max-width: 500px; - max-height: 9.5em; word-break: break-word; white-space: pre-line; + background: rgba(0,0,0,0.6); + padding: 10px; + border-radius: 10px; + transition: 0.5s; + + &:not(:hover) { + max-height: 1em; + } + + &:hover { + max-height: 9.5em; + transition: 1s; + } } .modal-image { diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index ab3080c8..fa3edacf 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -51,6 +51,10 @@ width: 100%; height: 100%; object-fit: contain; + + &::before { + line-height: 20px; + } } &.animated {