From 464eec96632c0196d8b7ee647538f122f397a502 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Wed, 22 Sep 2021 19:02:59 +0300
Subject: [PATCH] fix issue where viewcounts were creating a new line

---
 ui/component/fileViewCountInline/view.jsx |  1 +
 ui/scss/component/_claim-list.scss        | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx
index 395195c3c..e579fdae5 100644
--- a/ui/component/fileViewCountInline/view.jsx
+++ b/ui/component/fileViewCountInline/view.jsx
@@ -15,6 +15,7 @@ export default function FileViewCountInline(props: Props) {
   let formattedViewCount;
 
   try {
+    // SI notation that changes 1234 to 1.2K, look up Intl.NumberFormat() for docs
     formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', {
       compactDisplay: 'short',
       notation: 'compact',
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index aece45bcb..173bf0a73 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -556,13 +556,23 @@
 .claim-tile__info {
   display: flex;
   margin-top: var(--spacing-s);
-  padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);
   color: var(--color-subtitle);
+  padding: var(--spacing-s);
+
+  // accommodating for large view counts on channel overview
+  @media (min-width: $breakpoint-large) {
+    padding: var(--spacing-s) 4px;
+  }
 
   .channel-thumbnail {
     @include handleChannelGif(2.1rem);
     margin-right: var(--spacing-s);
+
+    // accommodating for large view counts on channel overview
+    @media (min-width: $breakpoint-large) {
+      margin-right: 4px;
+    }
   }
 }
 
@@ -608,7 +618,13 @@
 .view_count {
   &::after {
     content: '•';
-    margin: 0 var(--spacing-xxs);
+    margin: 0 4px;
+  }
+
+  @media (min-width: $breakpoint-large) {
+    &::after {
+      margin: 0 2.5px;
+    }
   }
 }