From 024e9209afa3086cab5f1660cac83edca873a5ba Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 6 Sep 2020 17:20:26 -0500
Subject: [PATCH] Chats: display of non-image attachments

---
 app/soapbox/components/media_gallery.js | 2 +-
 app/styles/chats.scss                   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 845b68db2..3eda57795 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -220,7 +220,7 @@ class Item extends React.PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <div className={classNames('media-gallery__item', `media-gallery__item--${attachment.get('type')}`, { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
         {visible && thumbnail}
       </div>
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 1f47cd57f..0d882fa02 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -351,6 +351,12 @@
     display: none;
   }
 
+  .media-gallery__item:not(.media-gallery__item--image) {
+    max-width: 100%;
+    width: 120px !important;
+    height: 70px !important;
+  }
+
   &__preview {
     background-color: transparent;
   }