diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx
index 28d380e8c..e1bd3d792 100644
--- a/ui/component/fileDetails/view.jsx
+++ b/ui/component/fileDetails/view.jsx
@@ -1,4 +1,6 @@
// @flow
+import * as PAGES from 'constants/pages';
+import * as CS from 'constants/claim_search';
import React, { Fragment, PureComponent } from 'react';
import Button from 'component/button';
import path from 'path';
diff --git a/ui/component/fileRenderHeader/index.js b/ui/component/fileRenderHeader/index.js
deleted file mode 100644
index e54062ecb..000000000
--- a/ui/component/fileRenderHeader/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
-import ClaimUri from './view';
-
-const select = (state, props) => ({
- claim: makeSelectClaimForUri(props.uri)(state),
-});
-
-export default connect(select)(ClaimUri);
diff --git a/ui/component/fileRenderHeader/view.jsx b/ui/component/fileRenderHeader/view.jsx
deleted file mode 100644
index 614af1a40..000000000
--- a/ui/component/fileRenderHeader/view.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-import * as PAGES from 'constants/pages';
-import * as CS from 'constants/claim_search';
-import React from 'react';
-import ClaimUri from 'component/claimUri';
-import Button from 'component/button';
-
-type Props = {
- uri: string,
- claim: ?Claim,
-};
-
-function FileRenderHeader(props: Props) {
- const { uri, claim } = props;
-
- return (
-
-
-
- {claim.meta.reposted > 0 && (
-
- )}
-
- );
-}
-
-export default FileRenderHeader;
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 48f8cd65e..07f440085 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import classnames from 'classnames';
import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes';
-import FileRenderHeader from 'component/fileRenderHeader';
+import ClaimUri from 'component/claimUri';
import FileTitle from 'component/fileTitle';
import FileRenderInitiator from 'component/fileRenderInitiator';
import FileRenderInline from 'component/fileRenderInline';
@@ -81,7 +81,7 @@ class FilePage extends React.Component {
if (RENDER_MODES.FLOATING_MODES.includes(mode)) {
return (
-
+
@@ -94,7 +94,7 @@ class FilePage extends React.Component {
if (RENDER_MODES.UNRENDERABLE_MODES.includes(mode)) {
return (
-
+
@@ -104,7 +104,7 @@ class FilePage extends React.Component {
if (RENDER_MODES.TEXT_MODES.includes(mode)) {
return (
-
+
@@ -114,7 +114,7 @@ class FilePage extends React.Component {
return (
-
+
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..a606297c4 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 {
@@ -144,7 +140,7 @@ $metadata-z-index: 1;
}
.channel__quick-actions {
- @extend .card__actions;
+ @extend .section__actions;
margin-left: var(--spacing-medium);
position: absolute;
top: 0;
@@ -152,6 +148,17 @@ $metadata-z-index: 1;
margin-top: var(--spacing-medium);
z-index: $metadata-z-index;
flex-wrap: wrap;
+ font-size: var(--font-base);
+
+ > * {
+ padding: 0 var(--spacing-xsmall);
+ }
+
+ @media (max-width: $breakpoint-small) {
+ > * {
+ margin-bottom: var(--spacing-xsmall);
+ }
+ }
}
.channel-name--inline {
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 795ca947e..9b5ea21b8 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -125,6 +125,10 @@
.media__thumb {
width: 14rem;
+
+ @media (max-width: $breakpoint-small) {
+ width: 5rem;
+ }
}
.channel-thumbnail {
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%;
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 63df8dc04..818665cdf 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -7,6 +7,10 @@
margin-bottom: 0;
}
+ @media (max-width: $breakpoint-small) {
+ font-size: var(--font-base);
+ }
+
// Headers
h1,
h2,
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index 2e95d0a17..df2ef5b2c 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -24,6 +24,7 @@
@media (max-width: $breakpoint-small) {
position: static;
transform: none;
+ margin-bottom: var(--spacing-xsmall);
}
// This is terrible and should not be removed
diff --git a/ui/scss/component/_placeholder.scss b/ui/scss/component/_placeholder.scss
index 0badb7083..6369b7cb7 100644
--- a/ui/scss/component/_placeholder.scss
+++ b/ui/scss/component/_placeholder.scss
@@ -31,12 +31,6 @@
width: 40%;
height: 2rem;
}
-
- @media (max-width: $breakpoint-small) {
- &.media__thumb {
- display: none;
- }
- }
}
.placeholder--text-document {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index f0936d01f..0b3a91316 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -23,10 +23,6 @@ html {
body {
font-size: 1em;
-
- @media (max-width: $breakpoint-small) {
- font-size: 1.3em;
- }
}
h1,