Add a button to remove pins from tray

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

app/views/my/pins/_pin.html.erb

@@ -1,3 +1,6 @@
 <div class="tray__item" id="<%= dom_id pin %>">
   <%= render "cards/display/preview", card: pin.card %>
+  <%= button_to card_pin_path(pin.card), method: :delete, class: "tray__remove-pin-btn btn btn--circle borderless" do %>
+    <%= icon_tag "remove-med" %> <span class="for-screen-reader">Un-pin this card</span>
+  <% end %>
 </div>