refactor: reusable dialog management

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 1rem;
   right: 2rem;
-  z-index: 100;
+  z-index: $zindex-floating;
 }
 
 .contentWrapper {

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -92,7 +92,7 @@ $inner-padding: 1rem;
   thead {
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: $zindex-floating;
     background-color: $gray-1350;
   }
 
@@ -152,12 +152,12 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
-  z-index: 999;
+  z-index: $zindex-floating;
 }
 
 .overlay {
   position: absolute;
-  z-index: 10;
+  z-index: $zindex-backdrop;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(2px);

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.module.scss

@@ -11,7 +11,7 @@
   left: 0;
   width: 100%;
   margin: 0;
-  z-index: 5;
+  z-index: $zindex-floating;
   padding-block: 0.25rem;
 
   max-height: 200px;

apps/client/src/features/operator/Operator.module.scss

@@ -20,12 +20,12 @@
 
 .editPrompt {
   position: fixed;
-  z-index: 1;
+  z-index: $zindex-dialog;
   left: 50%;
   transform: translate(-50%, 0);
   text-align: center;
 
-  background: rgba(0,0,0, 0.7);
+  background: $backdrop-color;
   border-radius: 2px;
   padding: 0.5em 2em;
   color: $orange-500;

apps/client/src/features/operator/edit-modal/EditModal.module.scss

@@ -3,7 +3,7 @@
   top: 10%;
   left: 50%;
 
-  z-index: 2;
+  z-index: $zindex-dialog;
   transform: translateX(-50%);
 
   padding-inline: 1rem;
@@ -45,9 +45,6 @@
   padding-block: 1rem;
   display: flex;
   align-items: center;
+  justify-content: end;
   gap: 1rem;
-
-  button {
-   width: 100%;
-  }
 }

apps/client/src/features/operator/follow-button/FollowButton.module.scss

@@ -4,7 +4,7 @@
   bottom: calc(1.5rem + env(safe-area-inset-bottom));
   left: 50%;
   transform: translateX(-50%);
-  z-index: 1;
+  z-index: $zindex-floating;
 
   display: flex;
   align-items: center;

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 2;
+  z-index: $zindex-floating;
 
   background-color: $gray-1350;
   border-bottom: 1px solid $white-10;

apps/client/src/features/overview/Overview.module.scss

@@ -17,7 +17,7 @@
     background-color: $red-700;
     border-radius: 2px;
     font-size: calc(1rem - 2px);
-    z-index: 10;
+    z-index: $zindex-sudo;
   }
 }
 

apps/client/src/features/rundown/event-block/RundownIndicators.module.scss

@@ -5,7 +5,7 @@ $gap-left: calc(2rem + 0.25rem + 3rem);
   font-size: calc(1rem - 5px);
   position: absolute;
   top: -1em;
-  z-index: 2;
+  z-index: $zindex-floating;;
   margin-left: $gap-left;
 
   display: flex;

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss

@@ -1,6 +1,6 @@
 .timeLabel {
   position: absolute;
-  z-index: 100;
+  z-index: $zindex-floating;
   font-size: 0.75rem;
   font-weight: 600;
   top: 2px;