diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss index b0bb6ccd..f66a571e 100644 --- a/client/scss/click-to-copy/_click-to-copy.scss +++ b/client/scss/click-to-copy/_click-to-copy.scss @@ -33,4 +33,3 @@ } } } - diff --git a/client/scss/row/_row.scss b/client/scss/row/_row.scss index 786fb884..d0df008d 100644 --- a/client/scss/row/_row.scss +++ b/client/scss/row/_row.scss @@ -58,3 +58,25 @@ } } + + +@media (max-width: $break-point-tablet) and (min-width: $break-point-phone) { + .tablet-inline-row { + display: flex; + justify-content: space-between; + width: 100%; + + >.row { + flex: 1; + margin: 0 15px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + } +} diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx index 71bfea1f..93d6db95 100644 --- a/client/src/containers/AssetInfo/view.jsx +++ b/client/src/containers/AssetInfo/view.jsx @@ -24,72 +24,75 @@ class AssetInfo extends React.Component { } rightSide={
- {channelName && ( +
+ {channelName && ( + + + } + content={ + + {channelName} + + } + /> + + )} + + +
+
+ + + } + content={ + } /> - )} - - - } - content={ - - } - /> - - - - - } - content={ - - } - /> - - - - - } - content={ -
- {(contentType === 'video/mp4') ? ( - `} - /> - ) : ( - `} - /> - )} -
- } - /> -
+ + + } + content={ +
+ {(contentType === 'video/mp4') ? ( + `} + /> + ) : ( + `} + /> + )} +
+ } + /> +
+