Merge branch 'conditional-letterbox' into 'develop'

Only letterbox media without an aspect ratio

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

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'

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 {