fix(Z-indexes): Redifine z-indexes between 0 and 5

app/components/CameraManager.vue

@@ -21,7 +21,8 @@ const { show_dialog, width } = defineProps({
     variant="panel"
     padding="pa-0"
     class="position-absolute elevation-24"
-    style="z-index: 2; top: 90px; right: 55px"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <v-card-text class="pa-0">
       <Saver />

app/components/CameraOrientation.vue

@@ -172,7 +172,8 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
-    style="z-index: 2; top: 90px; right: 55px"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <div
       class="pa-0 overflow-hidden position-relative"

app/components/FeedBack/ErrorBanner.vue

@@ -12,7 +12,7 @@ function reload() {
   <v-banner
     v-if="feedbackStore.server_error"
     elevation="2"
-    style="background-color: grey; z-index: 9999"
+    style="background-color: grey; z-index: 4"
     position="fixed"
   >
     <v-row>

app/components/FeedBack/Snackers.vue

@@ -24,6 +24,7 @@ function calc_margin(index) {
     max-width="200px"
     height="20px"
     timeout="10000"
+    z-index="4"
   >
     <v-row dense class="flex-nowrap">
       <v-col cols="auto">

app/components/HybridViewerTooltip.vue

@@ -181,7 +181,7 @@ function formatAttributeValue(val) {
 .floating-tooltip {
   position: absolute;
   pointer-events: none;
-  z-index: 10000;
+  z-index: 4;
   min-width: 200px;
   max-width: 450px;
   transition: opacity 0.15s ease;

app/components/Launcher.vue

@@ -31,7 +31,7 @@ if (infraStore.app_mode !== appMode.CLOUD) {
         class="align"
         cols="12"
         align-self="center"
-        style="z-index: 1000"
+        z-index="4"
       >
         <Recaptcha :button_color="'secondary'" />
       </v-col>

app/components/Loading.vue

@@ -61,8 +61,8 @@ onUnmounted(() => {
           height: 100vh;
           background: rgba(0, 0, 0, 0.45);
           backdrop-filter: blur(10px);
-          z-index: 2400;
           pointer-events: auto;
+          z-index: 3;
         "
       >
         <div
@@ -73,7 +73,7 @@ onUnmounted(() => {
             background-size: 40px 40px;
             background-position: center;
             pointer-events: none;
-            z-index: -1;
+            z-index: 0;
           "
         />
 

app/components/RemoteRenderingView.vue

@@ -105,7 +105,8 @@ onMounted(async () => {
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
+        style="overflow: hidden; position: relative; height: 100%; width: 100%"
+        z-index="0"
         class="pa-0"
         @click="get_x_y"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
@@ -117,7 +118,7 @@ onMounted(async () => {
 <style scoped>
 .list {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   top: 0;
   background-color: transparent;

app/components/ToolPanel.vue

@@ -62,7 +62,7 @@ function close() {
 
 <style scoped>
 .tool-panel {
-  z-index: 2;
+  z-index: 1;
   top: 90px;
   right: 55px;
 }

app/components/ViewToolbar.vue

@@ -215,7 +215,7 @@ const camera_options = computed(() => [
 <style module>
 .floatToolbar {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   right: 20px;
   top: 20px;
   background-color: rgba(0, 0, 0, 0);

app/components/Viewer/ContextMenu/CenterButton.vue

@@ -74,7 +74,8 @@ function onCenterClick(event) {
     icon
     variant="outlined"
     class="central-selector-btn elevation-6"
-    style="width: 52px; height: 52px; z-index: 5"
+    style="width: 52px; height: 52px"
+    z-index="1"
     :style="computedItemStyles"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"

app/components/Viewer/ContextMenu/ContextMenuItem.vue

@@ -242,7 +242,7 @@ function toggleOptions() {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 1001;
+  z-index: 4;
 }
 
 .options-right {

app/components/Viewer/ContextMenu/InfoCard.vue

@@ -178,7 +178,7 @@ const formattedId = computed(() => {
   bottom: 110px; /* Positions it beautifully above the circular menu */
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100;
+  z-index: 3;
   pointer-events: auto;
 }
 </style>

app/components/Viewer/ObjectTree/Base/StickyHeader.vue

@@ -37,7 +37,7 @@ const emit = defineEmits(["toggle-open", "toggle-select"]);
   border-bottom: 2px solid rgba(0, 0, 0, 0.05);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   cursor: pointer;
-  z-index: 20;
+  z-index: 2;
 }
 
 .sticky-tree-header:hover {

app/components/Viewer/ObjectTree/Layout.vue

@@ -304,7 +304,7 @@ function onVerticalResizeStart(event, index) {
 <style scoped>
 .treeview-layout {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   top: 0;
   height: calc(100vh - 100px);
@@ -414,7 +414,7 @@ function onVerticalResizeStart(event, index) {
   position: relative;
   cursor: ns-resize;
   background-color: transparent;
-  z-index: 5;
+  z-index: 1;
 }
 
 .v-split-resizer::after {
@@ -442,7 +442,7 @@ function onVerticalResizeStart(event, index) {
   width: 8px;
   height: 100%;
   cursor: ew-resize;
-  z-index: 10;
+  z-index: 2;
 }
 
 .total-resizer:hover {

app/components/Viewer/Ui.vue

@@ -135,7 +135,7 @@ defineExpose({ get_viewer_id });
   top: 20px;
   left: 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: 3;
 }
 
 @keyframes pulse-ring {