Fixes #5822 display of upload date and view count on smaller screens

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))

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;
     }
   }
 }

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;
   }
 }