From 8da30ad98f3581a2bee2939b6234b640d332e2c7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Apr 2022 15:47:55 -0500
Subject: [PATCH 1/3] Fix video letterboxing

---
 app/soapbox/features/video/index.js     | 6 ++++--
 app/styles/components/video-player.scss | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index 869fcdfce..72d18be0e 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -13,6 +13,8 @@ import Icon from 'soapbox/components/icon';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
+const DEFAULT_HEIGHT = 300;
+
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
   pause: { id: 'video.pause', defaultMessage: 'Pause' },
@@ -513,7 +515,7 @@ class Video extends React.PureComponent {
         height = Math.floor(containerWidth / aspectRatio);
       }
 
-      if (height) playerStyle.height = height;
+      playerStyle.height = height || DEFAULT_HEIGHT;
     }
 
     let warning;
@@ -553,7 +555,7 @@ class Video extends React.PureComponent {
           aria-label={alt}
           title={alt}
           width={width}
-          height={height || 300}
+          height={height || DEFAULT_HEIGHT}
           volume={volume}
           onClick={this.togglePlay}
           onKeyDown={this.handleVideoKeyDown}
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 4f40b06aa..aff5bb19f 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -119,6 +119,7 @@
     video {
       object-fit: contain;
       position: relative;
+      max-height: 100%;
     }
   }
 

From 1482b893234286919b7354d061e535ab28d235e6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Apr 2022 15:58:22 -0500
Subject: [PATCH 2/3] Fix letterboxed image background

---
 app/styles/components/media-gallery.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 397e98133..d6a32f8c2 100644
--- a/app/styles/components/media-gallery.scss
+++ b/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';

From 952e06ce41924388eb9284115acd28220b7ea5a3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Apr 2022 19:00:31 -0500
Subject: [PATCH 3/3] AutosuggestTextarea: fix expand animation

---
 app/soapbox/components/autosuggest_textarea.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index 69ec5d7a1..c5cf62b2d 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/app/soapbox/components/autosuggest_textarea.js
@@ -257,7 +257,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+                'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}
               id={id}