From 5b24ac05037956e8086f00e3ec91e5fc1d264387 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 12 May 2021 20:07:59 -0500
Subject: [PATCH] Only letterbox media without an aspect ratio

---
 app/soapbox/components/media_gallery.js  | 7 ++++---
 app/styles/components/media-gallery.scss | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index ff01de852..b526655a3 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -157,13 +157,14 @@ class Item extends React.PureComponent {
         </div>
       );
     } else if (attachment.get('type') === 'image') {
-      const previewUrl   = attachment.get('preview_url');
+      const previewUrl = attachment.get('preview_url');
 
-      const originalUrl   = attachment.get('url');
+      const originalUrl = attachment.get('url');
+      const letterboxed = !attachment.getIn(['meta', 'original', 'aspect']);
 
       thumbnail = (
         <a
-          className='media-gallery__item-thumbnail'
+          className={classNames('media-gallery__item-thumbnail', { letterboxed })}
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 0ce35a662..183adb74f 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -66,7 +66,7 @@
 
 .status__wrapper,
 .detailed-status__wrapper {
-  .media-gallery__item-thumbnail {
+  .media-gallery__item-thumbnail.letterboxed {
     &,
     .still-image {
       img {