fix button styles

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)}`}
         />
       )}

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

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 {

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