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 (
-
+
- {claim.meta.reposted > 0 && (
+ {claim && claim.meta.reposted > 0 && (
)}
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%;