Ensure bottom bar items are included in view transition calc

This avoids poping layer artifacts

app/assets/stylesheets/bar.css

@@ -14,6 +14,7 @@
     padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3));
     place-content: center;
     position: fixed;
+    view-transition-name: bar;
     z-index: var(--z-terminal);
 
     @media (prefers-color-scheme: dark) {
@@ -25,6 +26,10 @@
     }
   }
 
+  ::view-transition-group(bar) {
+    z-index: 99;
+  }
+
   .bar__input {
     transform: translateY(50%);
     transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);

app/assets/stylesheets/trays.css

@@ -328,6 +328,7 @@
 
   .tray--pins {
     inset-inline: var(--tray-margin) auto;
+    view-transition-name: tray-pins;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-start: -100%;
@@ -494,11 +495,16 @@
     }
   }
 
+  ::view-transition-group(tray-pins) {
+    z-index: 100;
+  }
+
   /* Notification-specific styles
   /* ------------------------------------------------------------------------ */
 
   .tray--notifications {
     inset-inline: auto var(--tray-margin);
+    view-transition-name: tray-notifications;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-end: -100%;
@@ -554,4 +560,8 @@
       }
     }
   }
+
+  ::view-transition-group(tray-notifications) {
+    z-index: 100;
+  }
 }