From d58d96b8dd7ddafecb784739bfaee2ace59e4761 Mon Sep 17 00:00:00 2001
From: Louis Sandoval <louis@sandoval.family>
Date: Sat, 3 Apr 2021 19:44:51 -0700
Subject: [PATCH] Fixes #5822 display of upload date and view count on smaller
 screens

---
 CHANGELOG.md                        |  1 +
 ui/scss/component/_file-render.scss | 14 ++++++++++----
 ui/scss/component/_media.scss       | 11 ++++++-----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71e806ef5..21d3f1f60 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 
+- Fix display of upload date and view count on smaller screens ([#5822](https://github.com/lbryio/lbry-desktop/issues/5822))
 - Autoplay looping to a previous video or itself ([#5711](https://github.com/lbryio/lbry-desktop/pull/5711))
 - Autoplay not working in mini-player mode ([#5716](https://github.com/lbryio/lbry-desktop/pull/5716))
 - Edited claim accidentally moved to 'Anonymous' ([#5767](https://github.com/lbryio/lbry-desktop/pull/5767))
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 6a881cd00..387c58e03 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -691,14 +691,20 @@ video::-internal-media-controls-overlay-cast-button {
 .file__viewdate {
   display: flex;
   justify-content: space-between;
+  flex-direction: column;
   margin-bottom: var(--spacing-s);
 
-  @media (min-width: $breakpoint-small) {
-    flex-direction: column;
-    margin-bottom: 0;
+  > :first-child {
+    margin-bottom: var(--spacing-s);
+  }
+
+  @media (max-width: $breakpoint-medium) {
+    flex-direction: row;
+    justify-content: start;
 
     > :first-child {
-      margin-bottom: var(--spacing-s);
+      margin-bottom: 0;
+      margin-right: 1rem;
     }
   }
 }
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 6c11d4961..dce06069a 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -57,12 +57,13 @@
 .media__subtitle--between {
   @extend .media__subtitle;
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: row;
 
-  @media (min-width: $breakpoint-small) {
-    justify-content: space-between;
-    align-items: flex-end;
-    flex-direction: row;
+  // smaller screen
+  @media (max-width: $breakpoint-medium) {
+    display: block;
   }
 }