From 6cb99b2d2eda5efb3c636b3e41b423fb361c674d Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 17 Jun 2020 23:37:36 +1200
Subject: [PATCH] Right align like bar counters

---
 .../components/watch-video-info/watch-video-info.sass | 11 ++++++-----
 .../components/watch-video-info/watch-video-info.vue  |  6 ++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 83b804efb..afdecd2aa 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -39,10 +39,10 @@
 .likeSection
   margin-top: 16px
   font-size: 14px
-  display: grid
-  grid-template-columns: auto auto
-  justify-content: space-between
+  display: flex
+  flex-direction: column
   margin-left: auto
+  text-align: right
   max-width: 210px
 
   @media screen and (max-width: 680px)
@@ -51,10 +51,11 @@
   .likeBar
     height: 8px
     border-radius: 4px
-    background: red
-    grid-column: 1 / 3
     margin-bottom: 4px
 
+  .likeCount
+    margin-right: 6px
+
 .videoOptions
   margin-top: 16px
   display: flex
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 722df7d9c..30b5e9176 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -48,8 +48,10 @@
             class="likeBar"
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
           ></div>
-          <div class="likeCount">👍 {{ likeCount }}</div>
-          <div class="dislikeCount">{{ dislikeCount }} 👎</div>
+          <div>
+            <span class="likeCount">👍 {{ likeCount }}</span>
+            <span class="dislikeCount">👎 {{ dislikeCount }}</span>
+          </div>
         </div>
       </div>
       <div class="videoOptions">