From ac564f252f88a3f361d56d8da44f268a4ecda685 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 18 Aug 2025 14:05:28 -0500
Subject: [PATCH] Tweak empty tray hat position when transitioning

---
 app/assets/stylesheets/trays.css | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 925f2e34f..38ab32006 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -56,6 +56,18 @@
     &:not([open]) {
       block-size: var(--footer-height);
       pointer-events: none;
+
+      /* On desktop, when there aren't items, tweak the position so the hat
+         doesn't look like it's coming from the bottom of the viewport */
+      @media (min-width: 800px) {
+        &:has(.tray__hat:last-child) {
+          inset-block-end: calc(var(--footer-height) / 2);
+
+          .tray__hat {
+            margin-block-end: 0;
+          }
+        }
+      }
     }
   }
 
@@ -151,8 +163,8 @@
       transition: var(--tray-duration) var(--tray-timing-function);
       transition-delay: var(--tray-item-delay);
       transition-property: margin, scale;
-      
-      
+
+
       &:not(.tray__hat) {
         z-index: var(--tray-item-z);
       }
@@ -328,7 +340,7 @@
       [open] &[aria-selected] {
         outline: 0;
         z-index: calc(var(--tray-item-z) + 2);
-  
+
         .card__link {
           border-radius: 0.25ch;
           outline: var(--focus-ring-size) solid var(--focus-ring-color);
@@ -463,7 +475,7 @@
       [open] &[aria-selected] {
         outline: 0;
         z-index: calc(var(--tray-item-z) + 2);
-        
+
         .card,
         .tray__hat & .btn {
           border-radius: 0.25ch;