diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/asset-preview/_asset-preview.scss
index 9b4043cc..5ad362d7 100644
--- a/client/scss/asset-preview/_asset-preview.scss
+++ b/client/scss/asset-preview/_asset-preview.scss
@@ -1,11 +1,20 @@
.asset-preview-image {
width : 100%;
- padding: 0px;
- margin : 0px
+ padding: 0;
+ margin : 0;
}
.asset-preview-video {
cursor: pointer;
background-color: #ffffff;
- width: calc(100% - 12px - 12px - 2px);
+ width: 100%;
+}
+
+h3.list-title {
+ margin: 0;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+ overflow: hidden;
+ line-height: 1em;
+ max-height: 2em;
}
diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/channel-claims-display/_channel-claims-display.scss
index 8d907e9b..e605dde8 100644
--- a/client/scss/channel-claims-display/_channel-claims-display.scss
+++ b/client/scss/channel-claims-display/_channel-claims-display.scss
@@ -1,5 +1,23 @@
.channel-claims-display {
- .button--secondary {
- margin-right: $secondary-padding;
+ width: 100%;
+ display: grid;
+ grid-gap: 16px;
+}
+
+@media (min-width: 1040px) {
+ .channel-claims-display {
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 1039px) {
+ .channel-claims-display {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media (max-width: 767px) {
+ .channel-claims-display {
+ grid-template-columns: 1fr;
}
}
diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx
index be09c200..17a26f1f 100644
--- a/client/src/components/AssetPreview/index.jsx
+++ b/client/src/components/AssetPreview/index.jsx
@@ -1,11 +1,11 @@
import React from 'react';
import { Link } from 'react-router-dom';
-const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
+const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, contentType, thumbnail, title } }) => {
const embedUrl = `/${claimId}/${name}.${fileExt}`;
const showUrl = `/${claimId}/${name}`;
return (
-
+
{(() => {
switch (contentType) {
case 'image/jpeg':
@@ -13,19 +13,25 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
case 'image/png':
case 'image/gif':
return (
-
+