Merge branch 'next-video-letterbox' into 'next'

Next: Fix video letterboxing

See merge request soapbox-pub/soapbox-fe!1223

app/styles/components/media-gallery.scss

@@ -103,6 +103,7 @@
 }
 
 .media-gallery__preview {
+  @apply bg-gray-200 dark:bg-slate-900;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -110,7 +111,6 @@
   top: 0;
   left: 0;
   z-index: 0;
-  background: var(--background-color);
 
   .still-image--play-on-hover::before {
     content: 'GIF';

app/styles/components/video-player.scss

@@ -119,6 +119,7 @@
     video {
       object-fit: contain;
       position: relative;
+      max-height: 100%;
     }
   }