From 146497d7313dc5cbe5752ab7d093023702ada003 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Thu, 22 Jan 2026 02:35:24 +0000
Subject: [PATCH] Fix display of vertical images and videos such they fit in
 the gallery item.

---
 frontend/src/components/GalleryFigure.vue | 5 ++++-
 frontend/src/components/MediaPreview.vue  | 7 +++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/GalleryFigure.vue b/frontend/src/components/GalleryFigure.vue
index f0e33d9..108efb2 100644
--- a/frontend/src/components/GalleryFigure.vue
+++ b/frontend/src/components/GalleryFigure.vue
@@ -75,12 +75,15 @@ figure {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: end;
+  justify-content: center;
   overflow: hidden;
 }
 figure > article {
   flex: 0 0 auto;
 }
+figure :deep(.video-container) {
+  height: 15em;
+}
 .titlespacer {
   flex-shrink: 100000;
   width: 100%;
diff --git a/frontend/src/components/MediaPreview.vue b/frontend/src/components/MediaPreview.vue
index f9ed8c8..10d6ec1 100644
--- a/frontend/src/components/MediaPreview.vue
+++ b/frontend/src/components/MediaPreview.vue
@@ -179,11 +179,10 @@ img::before {
   max-height: 100%;
 }
 .video-container video {
-  font-size: 8em;
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
   border-radius: calc(.5em / 8);
+  object-fit: contain;
 }
 .play-overlay {
   position: absolute;