From 255419a6e99eee42472e627658b08b7b6d0f0bda Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 7 Sep 2020 19:13:59 -0500
Subject: [PATCH] Chats: display attachments in a shitty letterbox to support
 FireFox

---
 .../chats/components/chat_message_list.js     | 20 ++++++++++---------
 app/styles/chats.scss                         |  8 ++++++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index 48937518d..1cfc41442 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -155,15 +155,17 @@ class ChatMessageList extends ImmutablePureComponent {
     const attachment = chatMessage.get('attachment');
     if (!attachment) return null;
     return (
-      <Bundle fetchComponent={MediaGallery}>
-        {Component => (
-          <Component
-            media={ImmutableList([attachment])}
-            height={120}
-            onOpenMedia={this.onOpenMedia}
-          />
-        )}
-      </Bundle>
+      <div className='chat-message__media'>
+        <Bundle fetchComponent={MediaGallery}>
+          {Component => (
+            <Component
+              media={ImmutableList([attachment])}
+              height={120}
+              onOpenMedia={this.onOpenMedia}
+            />
+          )}
+        </Bundle>
+      </div>
     );
   }
 
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index d5cb4b361..29c2f0c4f 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -342,8 +342,12 @@
   }
 }
 
+.chat-message__media {
+  height: 120px;
+}
+
 .chat-message .media-gallery {
-  height: auto !important;
+  height: 100% !important;
   margin: 4px 0 8px;
 
   .spoiler-button {
@@ -353,7 +357,7 @@
   .media-gallery__item:not(.media-gallery__item--image) {
     max-width: 100%;
     width: 120px !important;
-    height: 70px !important;
+    height: 100% !important;
   }
 
   &__preview {