diff --git a/ui/component/fileViewerEmbeddedTitle/view.jsx b/ui/component/fileViewerEmbeddedTitle/view.jsx
index e05dd735d..18c375602 100644
--- a/ui/component/fileViewerEmbeddedTitle/view.jsx
+++ b/ui/component/fileViewerEmbeddedTitle/view.jsx
@@ -1,6 +1,7 @@
// @flow
import React from 'react';
import Button from 'component/button';
+import FilePrice from 'component/filePrice';
import { formatLbryUrlForWeb } from 'util/url';
import { withRouter } from 'react-router';
import { URL } from 'config';
@@ -25,13 +26,12 @@ function FileViewerEmbeddedTitle(props: Props) {
const lbryLinkProps = isInApp ? { navigate: '/' } : { href: URL };
return (
-
-
-
+
);
}
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 5454fbfcb..388a2fe40 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -197,11 +197,11 @@
}
}
-.file-viewer--is-playing:not(:hover) .file-viewer__embedded-title {
+.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
display: none;
}
-.file-viewer__embedded-title {
+.file-viewer__embedded-header {
position: absolute;
display: flex;
justify-content: space-between;
@@ -226,14 +226,32 @@
&:hover {
color: var(--color-white);
}
+ }
- &:first-of-type {
- max-width: 90%;
+ .credit-amount,
+ .icon--Key {
+ margin-right: var(--spacing-medium);
+ }
+}
- @media (max-width: $breakpoint-small) {
- max-width: 80%;
- }
- }
+.file-viewer__embedded-title {
+ max-width: 75%;
+
+ @media (max-width: $breakpoint-small) {
+ max-width: 50%;
+ font-size: var(--font-small);
+ }
+}
+
+.file-viewer__embedded-info {
+ display: flex;
+ align-items: center;
+ font-size: var(--font-small);
+ margin-left: var(--spacing-medium);
+ white-space: nowrap;
+
+ & > *:not(:last-child) {
+ margin-right: var(--spacing-small);
}
}
diff --git a/ui/scss/component/_purchase.scss b/ui/scss/component/_purchase.scss
index 36bde76f3..0ef2d1aae 100644
--- a/ui/scss/component/_purchase.scss
+++ b/ui/scss/component/_purchase.scss
@@ -5,7 +5,7 @@
color: var(--color-purchased-text);
.credit-amount,
- .icon {
+ .icon--Key {
position: relative;
margin-left: var(--spacing-medium);
white-space: nowrap;