Merge pull request #10048 from DestinyItemManager/notification-zindex

Adjust notifications z-index above tempContainer

src/app/_variables.scss

@@ -84,6 +84,9 @@ $search-bar-height: 28px;
 $emblem-width: 237px;
 $emblem-height: 48px;
 
+// The z-index for our "temp container" where all temporary items get placed.
+$tempContainerZindex: 1000;
+
 // A mixin that allows targeting styles only when in phone-portrait display mode
 @mixin phone-portrait {
   // This seems like a good breakpoint for portrait based on https://material.io/devices/

src/app/notifications/NotificationsContainer.m.scss

@@ -5,7 +5,7 @@
 
   @include below-header;
   right: 0;
-  z-index: 1000;
+  z-index: $tempContainerZindex + 1;
   padding: 8px;
   box-sizing: border-box;
   width: 100%;

src/app/shell/Header.m.scss

@@ -13,7 +13,7 @@ $header-height: 44px;
   position: fixed;
   // Above the tempContainer. This is pretty much entirely so the search
   // autocomplete menu displays above the search results sheet on mobile.
-  z-index: 1001;
+  z-index: $tempContainerZindex + 2;
   top: 0;
   left: 0;
   right: 0;

src/app/utils/temp-container.scss

@@ -1,3 +1,5 @@
+@use '../variables.scss' as *;
+
 #temp-container {
   // Position this at the very top of the screen. Most things won't care
   // (they're absolutely positioned themselves, but @textcomplete doesn't know
@@ -7,5 +9,5 @@
   top: 0;
   width: 100%;
   // Make sure things in the temp container display above others
-  z-index: 1000;
+  z-index: $tempContainerZindex;
 }