From 90024fc7ea75f2648d81330a4f49e30cdf03eaaa Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 1 Apr 2020 15:36:59 -0400
Subject: [PATCH] fix button styles

---
 ui/component/fileRenderHeader/view.jsx |  6 +++---
 ui/scss/component/_button.scss         |  8 ++++++++
 ui/scss/component/_channel.scss        | 11 +++++++----
 ui/scss/component/_file-render.scss    |  6 ++++++
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/ui/component/fileRenderHeader/view.jsx b/ui/component/fileRenderHeader/view.jsx
index 614af1a40..8872b7ad7 100644
--- a/ui/component/fileRenderHeader/view.jsx
+++ b/ui/component/fileRenderHeader/view.jsx
@@ -14,14 +14,14 @@ function FileRenderHeader(props: Props) {
   const { uri, claim } = props;
 
   return (
-    <div>
+    <div className="file-render__header">
       <ClaimUri uri={uri} />
 
-      {claim.meta.reposted > 0 && (
+      {claim && claim.meta.reposted > 0 && (
         <Button
           button="link"
           className="media__uri--right"
-          label={__('View %count% reposts', { count: claim.meta.reposted })}
+          label={__('View reposts')}
           navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
         />
       )}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 2582c5e4f..bf674ba7d 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -1,3 +1,11 @@
+.button--primary,
+.button--secondary,
+.button--alt {
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
+}
+
 .button--uri-indicator {
   @extend .button--link;
   color: var(--color-text-subtitle);
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 52245f7ee..670f8a4bb 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -8,10 +8,6 @@ $metadata-z-index: 1;
   align-items: flex-end;
   box-sizing: content-box;
   color: #fff;
-
-  .button--alt {
-    padding: 0 var(--spacing-small);
-  }
 }
 
 .channel-cover__custom {
@@ -152,6 +148,13 @@ $metadata-z-index: 1;
   margin-top: var(--spacing-medium);
   z-index: $metadata-z-index;
   flex-wrap: wrap;
+
+  @media (max-width: $breakpoint-small) {
+    > * {
+      margin-bottom: var(--spacing-xsmall);
+      padding: 0 var(--spacing-xsmall);
+    }
+  }
 }
 
 .channel-name--inline {
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 9f5f15eb5..70b807242 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -70,6 +70,12 @@
   }
 }
 
+.file-render__header {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
 .file-render__viewer {
   width: 100%;
   height: 100%;