diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 7334aff5d..2d53bacd9 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -306,9 +306,30 @@ .tray__item { --tray-item-z: calc(10 - var(--tray-item-index)); + position: relative; + &:nth-child(1n + var(--tray-max-items)) { display: none; } } + .tray__remove-pin-btn { + --btn-icon-size: 1.25em; + --btn-size: 2em; + + background-color: var(--card-bg-color); + inset: 0 0 auto auto; + opacity: 0; + position: absolute; + z-index: 1; + + .tray__dialog[open] & { + opacity: 0.66; + + &:hover { + opacity: 1; + } + } + } + .avatar, .card__tags, .card__meta .btn, @@ -387,17 +408,6 @@ } } } - - /* On desktop, don't expand if there's only one pin */ - @media (min-width: 800px) { - .tray__dialog:has(.tray__item:only-child) { - pointer-events: unset; - - ~ .tray__toggle { - display: none; - } - } - } } /* Notification-specific styles diff --git a/app/views/my/pins/_pin.html.erb b/app/views/my/pins/_pin.html.erb index 935687995..5d80b4bbe 100644 --- a/app/views/my/pins/_pin.html.erb +++ b/app/views/my/pins/_pin.html.erb @@ -1,3 +1,6 @@