From ace9f7c294a0fba23d39bd010188e3e633f1ad77 Mon Sep 17 00:00:00 2001
From: JonnyWong16 <9099342+JonnyWong16@users.noreply.github.com>
Date: Sun, 21 Mar 2021 17:50:45 -0700
Subject: [PATCH] Fix spacing of rating images on media page

---
 data/interfaces/default/css/tautulli.css | 25 +++++++++++++++---------
 data/interfaces/default/info.html        | 10 +++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css
index f996bae2..fb73e05c 100644
--- a/data/interfaces/default/css/tautulli.css
+++ b/data/interfaces/default/css/tautulli.css
@@ -1923,7 +1923,7 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     color: #999;
 }
 .critic-rating {
-    display: inline-block;
+    display: flex;
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
@@ -4073,41 +4073,48 @@ a:hover .overlay-refresh-image:hover {
     background-image: url(../images/icons/most-concurrent-streams.svg);
 }
 .rating-image {
-    width: 51px;
     height: 20px;
     margin-left: 10px;
+    margin-right: 5px;
     display: inline-block;
     background-origin: content-box !important;
-    background-size: contain !important;
     background-repeat: no-repeat !important;
     background-position: left !important;
-    text-align: right;
 }
 .rating-imdb {
-    width: 62px !important;
+    width: 36px;
     background-image: url(../images/rating/imdb.svg);
+    background-size: auto 20px;
 }
 .rating-themoviedb {
-    width: 72px !important;
+    width: 38px;
     background-image: url(../images/rating/themoviedb.svg);
-    background-size: auto 16px !important;
+    background-size: auto 16px;
 }
 .rating-thetvdb {
-    width: 72px !important;
+    width: 36px;
     background-image: url(../images/rating/thetvdb.svg);
-    background-size: auto 36px !important;
+    background-size: auto 36px;
 }
 .rating-rottentomatos-ripe {
+    width: 17px;
     background-image: url(../images/rating/tomato-ripe.svg);
+    background-size: auto 20px;
 }
 .rating-rottentomatos-rotten {
+    width: 17px;
     background-image: url(../images/rating/tomato-rotten.svg);
+    background-size: auto 20px;
 }
 .rating-rottentomatos-upright {
+    width: 16px;
     background-image: url(../images/rating/popcorn-upright.svg);
+    background-size: auto 20px;
 }
 .rating-rottentomatos-spilled {
+    width: 19px;
     background-image: url(../images/rating/popcorn-spilled.svg);
+    background-size: auto 20px;
 }
 .transparent {
     background-color: transparent !important;
diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html
index 3f04de86..f63ca6d3 100644
--- a/data/interfaces/default/info.html
+++ b/data/interfaces/default/info.html
@@ -313,27 +313,27 @@ DOCUMENTATION :: END
                             % if data['audience_rating_image']:
                             % if data['audience_rating_image'].startswith('imdb://'):
                             <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
-                                <span class="rating-image rating-imdb"><strong>${rating}</strong></span>
+                                <span class="rating-image rating-imdb"></span><strong>${rating}</strong>
                             </div>
                             % endif
                             % if data['audience_rating_image'].startswith('themoviedb://'):
                             <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
-                                <span class="rating-image rating-themoviedb"><strong>${get_percent(rating, 10)}%</strong></span>
+                                <span class="rating-image rating-themoviedb"></span><strong>${get_percent(rating, 10)}%</strong>
                             </div>
                             % endif
                             % if data['audience_rating_image'].startswith('thetvdb://'):
                             <div class="critic-rating hidden-xs hidden-sm" title="${rating}">
-                                <span class="rating-image rating-thetvdb"><strong>${get_percent(rating, 10)}%</strong></span>
+                                <span class="rating-image rating-thetvdb"></span><strong>${get_percent(rating, 10)}%</strong>
                             </div>
                             % endif
                             % if data['audience_rating_image'].startswith('rottentomatoes://'):
                             <div class="critic-rating hidden-xs hidden-sm" title="${data['audience_rating']}">
-                                <span class="rating-image rating-rottentomatos-${data['audience_rating_image'].rsplit('.')[-1]}"><strong>${get_percent(data['audience_rating'], 10)}%</strong></span>
+                                <span class="rating-image rating-rottentomatos-${data['audience_rating_image'].rsplit('.')[-1]}"></span><strong>${get_percent(data['audience_rating'], 10)}%</strong>
                             </div>
                             % endif
                             % if data['rating_image'].startswith('rottentomatoes://'):
                             <div class="critic-rating hidden-xs hidden-sm" title="${data['rating']}">
-                                <span class="rating-image rating-rottentomatos-${data['rating_image'].rsplit('.')[-1]}"><strong>${get_percent(data['rating'], 10)}%</strong></span>
+                                <span class="rating-image rating-rottentomatos-${data['rating_image'].rsplit('.')[-1]}"></span><strong>${get_percent(data['rating'], 10)}%</strong>
                             </div>
                             % endif
                             % else: