WIP

app/assets/stylesheets/trays.css

@@ -65,11 +65,11 @@
 
   .tray__toggle {
     align-self: stretch;
-    background: transparent;
+    background: none;
+    background: oklch(var(--lch-yellow-medium) / 50%);
     border: 0;
-    display: grid;
-    margin-block: calc(var(--block-space) * -1) var(--block-space-half);
-    place-content: center;
+    display: block;
+    padding: 0;
     z-index: calc(var(--z-tray) + 1);
 
     .icon {
@@ -77,21 +77,26 @@
       display: none;
     }
 
-    .tray__dialog[open] ~ & {
-      display: none;
-    }
-
-    /* On mobile, add an icon to the expander button */
     @media (max-width: 799px) {
-      inline-size: var(--footer-height);
-      margin: 0;
+      /* When collapsed on mobile, make it small */
+      .tray__dialog:not([open]) ~ & {
+        inline-size: var(--footer-height);
 
-      .icon {
-        display: block;
+        .tray__toggle-btn {
+          border: 0;
+        }
+
+        .icon {
+          display: block;
+        }
+
+        .tray__toggle-text {
+          display: none;
+        }
       }
 
       /* Show a red dot if there are items to show */
-      .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after {
+      .tray__dialog:not([open]):has(.tray__item:not(.tray__item--overflow)) ~ &:after {
         background: oklch(var(--lch-red-medium));
         block-size: 1ch;
         border-radius: 50%;
@@ -101,11 +106,28 @@
         position: absolute;
       }
     }
+  }
 
-    /* On desktop, hide if there aren't any items to show */
+  .tray__toggle-btn {
+    --btn-background: transparent;
+
+    border-style: dashed;
+    border-radius: 1ch;
+    inline-size: 100%;
+
+    /* On desktop… */
     @media (min-width: 800px) {
-      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
-        display: none
+      /* Hide the UI when collapsed, but only if there are Pins */
+      .tray__dialog:has(.tray__item:not(.tray__item--overflow)) {
+        opacity: 0;
+      }
+    }
+
+    .tray__dialog[open] ~ .tray__toggle & {
+      opacity: 0.66;
+
+      &:hover {
+        opacity: 1;
       }
     }
   }
@@ -125,16 +147,6 @@
     transition: translate var(--tray-duration) var(--tray-timing-function);
     translate: 0 var(--footer-height);
 
-    /* Get the circle buttons to be full-height without magic numbers */
-    form {
-      aspect-ratio: 1;
-
-      .btn {
-        block-size: 100%;
-        inline-size: 100%;
-      }
-    }
-
     .btn {
       opacity: 0.66;
 

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

@@ -6,13 +6,10 @@
     <%= turbo_frame_tag "pins", src: my_pins_path %>
   <% end %>
 
-  <div class="tray__actions">
-    <button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center full-width" data-action="click->dialog#close">
-      Pinned
-    </button>
-  </div>
-
-  <button class="tray__toggle" data-action="dialog#toggle" aria-label="Expand pins stack" aria-haspopup="true">
-    <%= icon_tag "pinned" %>
+  <button class="tray__toggle" data-action="dialog#toggle" aria-label="Toggle pins stack" aria-haspopup="true">
+    <div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
+      <%= icon_tag "pinned" %>
+      <span class="tray__toggle-text">Pinned</span>
+    </div>
   </button>
 </section>