From 9b0dfdc15e27294138c741dbfd6f98d2267a2452 Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Fri, 1 Mar 2024 19:05:26 -0500
Subject: [PATCH 1/3] Split view count and published date into two lines on
 small displays

---
 .../watch-video-info/watch-video-info.scss    | 56 +++++++++++--------
 .../watch-video-info/watch-video-info.vue     |  6 +-
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 343f1159982d6..b4e1112e803b8 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -70,31 +70,43 @@
 .videoMetrics {
   font-size: 14px;
   color: var(--tertiary-text-color);
-
   .likeSection {
-  color: var(--tertiary-text-color);
-  display: flex;
-  flex-direction: column;
-  margin-inline-start: auto;
-  margin-block-start: 4px;
-  max-inline-size: 210px;
-  text-align: end;
+    color: var(--tertiary-text-color);
+    display: flex;
+    flex-direction: column;
+    margin-inline-start: auto;
+    margin-block-start: 4px;
+    max-inline-size: 210px;
+    text-align: end;
 
-  @media screen and (max-width: 680px) {
-    margin-inline-start: 0;
-    text-align: start;
-  }
+    @media screen and (max-width: 680px) {
+      margin-inline-start: 0;
+      text-align: start;
+    }
 
-  .likeBar {
-    border-radius: 4px;
-    block-size: 8px;
-    margin-block-end: 4px;
-  }
+    .likeBar {
+      border-radius: 4px;
+      block-size: 8px;
+      margin-block-end: 4px;
+    }
 
-  .likeCount {
-    margin-inline-end: 0;
-    display: flex;
-    gap: 3px;
+    .likeCount {
+      margin-inline-end: 0;
+      display: flex;
+      gap: 3px;
+    }
+  }
+  .datePublishedAndViewCount {
+    @media only screen and (max-width: 460px) {
+      display: flex;
+      justify-content: left;
+      flex-direction: column;
+      .seperator {
+        display: none;
+      }
+    }
+  }
+  .videoViews {
+    white-space: nowrap;
   }
-}
 }
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 78d6f137b9d49..76843dbb4112b 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -10,8 +10,10 @@
     <div class="videoMetrics">
       <div class="datePublishedAndViewCount">
         {{ publishedString }} {{ dateString }}
-        <template v-if="!hideVideoViews">
-          • {{ parsedViewCount }}
+        <template
+          v-if="!hideVideoViews"
+        >
+          <span class="seperator">• </span><span class="videoViews">{{ parsedViewCount }}</span>
         </template>
       </div>
       <div

From 4960ec48a40a740c5a1db6176be38e7b99233252 Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Sun, 3 Mar 2024 07:07:21 -0500
Subject: [PATCH 2/3] Add blank line

Co-authored-by: PikachuEXE <git@pikachuexe.net>
---
 src/renderer/components/watch-video-info/watch-video-info.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index b4e1112e803b8..192373cbbf1ae 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -101,6 +101,7 @@
       display: flex;
       justify-content: left;
       flex-direction: column;
+
       .seperator {
         display: none;
       }

From b8f35038d78ec594ff4715719bcf79610dc32ca0 Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Sun, 3 Mar 2024 07:08:30 -0500
Subject: [PATCH 3/3] Add blank line back

---
 src/renderer/components/watch-video-info/watch-video-info.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index 192373cbbf1ae..1a235e246ad9a 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -70,6 +70,7 @@
 .videoMetrics {
   font-size: 14px;
   color: var(--tertiary-text-color);
+
   .likeSection {
     color: var(--tertiary-text-color);
     display: flex;