From 3a526e2369c45e0e7e0eaea83d62c94587a82975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sat, 15 Jul 2017 15:38:18 +0200
Subject: [PATCH] Fix broken letterboxing in media previews

---
 app/javascript/styles/components.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index b06c99c95..34539a9f4 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3954,13 +3954,14 @@ button.icon-button.active i.fa-retweet {
 
 .media-gallery__item-thumbnail {
   cursor: zoom-in;
-  display: block;
   text-decoration: none;
   width: 100%;
   height: 100%;
+  display: flex;
 
   img {
     width: 100%;
+    object-fit: contain;
 
     &:not(.letterbox) {
       height: 100%;
@@ -3974,6 +3975,8 @@ button.icon-button.active i.fa-retweet {
   overflow: hidden;
   position: relative;
   width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .media-gallery__item-gifv-thumbnail {
@@ -3981,6 +3984,7 @@ button.icon-button.active i.fa-retweet {
   height: 100%;
   position: relative;
   z-index: 1;
+  object-fit: contain;
 
   &:not(.letterbox) {
     height: 100%;