fix(ui): select dropdown obscured by header in landscape mode

Author: ahmed-abdat

packages/ui/src/elements/ReactSelect/index.scss

@@ -36,7 +36,7 @@
     }
 
     .rs__menu {
-      z-index: 4;
+      z-index: var(--z-select-menu);
       border-radius: 0;
       @include shadow-lg;
       background: var(--theme-input-bg);

packages/ui/src/fields/Select/index.scss

@@ -3,6 +3,8 @@
 @layer payload-default {
   .field-type.select {
     position: relative;
+    // Fixes a bug where the Select field's dropdown menu would be hidden behind the AppHeader in landscape mobile mode
+    z-index: 1;
   }
 
   html[data-theme='light'] {

packages/ui/src/scss/app.scss

@@ -34,6 +34,7 @@
     --z-popup: 10;
     --z-nav: 20;
     --z-modal: 30;
+    --z-select-menu: 35;
     --z-status: 40;
 
     --accessibility-outline: 2px solid var(--theme-text);