Tidy up

app/assets/stylesheets/_global.css

@@ -33,6 +33,10 @@
   --footer-height: 3.5rem;
   --tray-size: clamp(12rem, 25dvw, 24rem);
 
+  @media (max-width: 799px) {
+    --tray-size: var(--footer-height);
+  }
+
   /* Z-index */
   --z-events-column-header: 1;
   --z-events-day-header: 2;

app/assets/stylesheets/trays.css

@@ -45,11 +45,6 @@
     transition: var(--tray-duration) var(--tray-timing-function);
     transition-property: background-color, box-shadow, inset-block-end;
 
-    &:not([open]) {
-      block-size: var(--footer-height);
-      pointer-events: none;
-    }
-
     &[open] {
       border-radius: var(--tray-radius);
       box-shadow:
@@ -58,6 +53,11 @@
       inset-block-end: var(--footer-height);
       overflow: hidden;
     }
+
+    &:not([open]) {
+      block-size: var(--footer-height);
+      pointer-events: none;
+    }
   }
 
   /* Expander
@@ -79,12 +79,11 @@
       display: none;
     }
 
-    /* Always hide when dialog is open */
     .tray__dialog[open] ~ & {
       display: none;
     }
 
-    /* On mobile, add an icon */
+    /* On mobile, add an icon to the expander button */
     @media (max-width: 799px) {
       inline-size: var(--footer-height);
 
@@ -92,9 +91,9 @@
         display: block;
       }
 
-      /* Show a red dot if there are items to show*/
+      /* Show a red dot if there are items to show */
       .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after {
-        background: tomato;
+        background: oklch(var(--lch-red-medium));
         block-size: 1ch;
         border-radius: 50%;
         content: "";
@@ -129,12 +128,6 @@
     transition: translate var(--tray-duration) var(--tray-timing-function);
     translate: 0 var(--footer-height);
 
-    .tray__dialog[open] ~ &,
-    .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
-      opacity: 1;
-      translate: 0 0;
-    }
-
     /* Get the circle buttons to be full-height without magic numbers */
     form {
       aspect-ratio: 1;
@@ -154,13 +147,16 @@
       }
     }
 
-    @media (max-width: 799px) {
-      .tray__dialog:not([open]) ~ & {
-        opacity: 0 !important;
+    .tray__dialog[open] ~ & {
+      opacity: 1;
+      translate: 0 0;
+    }
 
-        .btn {
-          pointer-events: none;
-        }
+    /* On desktop, show actions when there aren't items */
+    @media (min-width: 800px) {
+      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
+        opacity: 1;
+        translate: 0 0;
       }
     }
 
@@ -218,6 +214,12 @@
       --tray-item-scale: 1;
     }
 
+    .tray__dialog:not([open]) & {
+      @media (max-width: 799px) {
+        opacity: 0;
+      }
+    }
+
     .bubble {
       display: none;
     }
@@ -238,6 +240,7 @@
       justify-content: center;
     }
 
+    /* Only show when there are 7+ items */
     .tray__dialog:has(.tray__item:nth-child(7)) & {
       display: flex;
     }
@@ -289,7 +292,7 @@
     }
   }
 
-  /* Pins tray
+  /* Pin-specific styles
   /* ------------------------------------------------------------------------ */
 
   .tray--pins {
@@ -351,8 +354,9 @@
       display: none;
     }
 
-    /* On mobile, add a border */
+    /* On mobile… */
     @media (max-width: 799px) {
+      /* …add a border */
       .tray__expander {
         border-inline-end: 1px dashed oklch(var(--lch-white) / 50%);
         translate: calc(-1 * var(--tray-margin)) 0;
@@ -380,7 +384,7 @@
     }
   }
 
-  /* Notifications tray
+  /* Notification-specific styles
   /* ------------------------------------------------------------------------ */
 
   .tray--notifications {
@@ -407,26 +411,16 @@
 
     /* On mobile… */
     @media (max-width: 799px) {
-      /* Add a border to the expander */
+      /* …add a border */
       .tray__expander {
         border-inline-start: 1px dashed oklch(var(--lch-white) / 50%);
         translate: var(--tray-margin) 0;
       }
 
-      /* Hide the dialog if there aren't items */
+      /* …and hide the dialog if there aren't items to show */
       .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) {
         display: none;
       }
     }
   }
 }
-
-:root {
-    @media (max-width: 799px) {
-    --tray-size: var(--footer-height);
-
-    .tray__dialog:not([open]) .tray__item {
-      opacity: 0;
-    }
-  }
-}