diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss index 5c5d7dc68..4a79d7e71 100644 --- a/src/ui/scss/component/_channel.scss +++ b/src/ui/scss/component/_channel.scss @@ -28,7 +28,7 @@ $metadata-z-index: 1; .channel-thumbnail { display: flex; height: 5rem; - width: 6rem; + width: 5rem; background-size: cover; margin-right: var(--spacing-medium); } diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss index 4db23e906..0bd17e228 100644 --- a/src/ui/scss/component/_claim-list.scss +++ b/src/ui/scss/component/_claim-list.scss @@ -82,20 +82,13 @@ } .claim-preview { + @include mediaThumbHoverZoom; display: flex; position: relative; + overflow: visible; + cursor: pointer; font-size: 1.3rem; padding: var(--spacing-medium); - cursor: pointer; - overflow: hidden; - - &:hover { - background-color: darken($lbry-white, 5%); - - [data-mode='dark'] & { - background-color: var(--dm-color-04); - } - } .media__thumb { width: var(--file-list-thumbnail-width); @@ -122,11 +115,10 @@ } .claim-preview--large { - @include mediaThumbHoverZoom; font-size: 1.6rem; border-bottom: 0; padding: 0; - padding-bottom: var(--spacing-medium); + margin: var(--spacing-small) 0; &:hover { background-color: transparent; @@ -153,7 +145,7 @@ .claim-preview-metadata { display: flex; flex-direction: column; - width: 100%; + flex: 1; } .claim-preview-info {