diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index e95673ddf..3ffe7a484 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -225,18 +225,21 @@ function ClaimPreviewTile(props: Props) { )} - -

- - {isChannel && ( -
- -
- )} - {/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */} - -

-
+
+ +

+ + {isChannel && ( +
+ +
+ )} +

+
+ {/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */} + +
+
{isChannel ? ( diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index b029bc046..d16439fe2 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -471,7 +471,7 @@ cursor: pointer; .claim__menu-button { - display: block; + opacity: 1; } .collection-preview__overlay-thumbs { opacity: 1; @@ -536,11 +536,6 @@ font-size: var(--font-small); min-height: 2rem; - .claim__menu-button { - right: 0.2rem; - top: var(--spacing-s); - } - @media (min-width: $breakpoint-small) { min-height: 2.5rem; padding-right: var(--spacing-m); @@ -737,6 +732,23 @@ } } +.claim-tile__header { + position: relative; + + .claim__menu-button { + right: 0.2rem; + top: var(--spacing-s); + + &:focus { + opacity: 1; + .icon { + background-color: var(--color-button-alt-bg); + border-radius: var(--border-radius); + } + } + } +} + .claim__menu-button { position: absolute; top: var(--spacing-xs); @@ -748,7 +760,7 @@ @media (min-width: $breakpoint-small) { &:not([aria-expanded='true']) { - display: none; + opacity: 0; } } }