From b2750b0f7071693d7a103b6f25b7e46e7837bc23 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 28 May 2026 14:48:32 +0200
Subject: [PATCH 1/2] fix(Z-indexes): Redifine z-indexes between 0 and 5

---
 app/components/CameraManager.vue                  |  2 +-
 app/components/CameraOrientation.vue              |  2 +-
 app/components/FeedBack/ErrorBanner.vue           |  2 +-
 app/components/FeedBack/Snackers.vue              |  1 +
 app/components/HybridRenderingView.vue            | 14 +++++++++++---
 app/components/HybridViewerTooltip.vue            |  2 +-
 app/components/Launcher.vue                       |  2 +-
 app/components/Loading.vue                        | 15 ++++-----------
 app/components/RemoteRenderingView.vue            |  4 ++--
 app/components/ToolPanel.vue                      |  2 +-
 app/components/ViewToolbar.vue                    |  2 +-
 .../Viewer/ContextMenu/CenterButton.vue           |  2 +-
 .../Viewer/ContextMenu/ContextMenuItem.vue        |  2 +-
 app/components/Viewer/ContextMenu/InfoCard.vue    |  2 +-
 .../Viewer/ObjectTree/Base/StickyHeader.vue       |  2 +-
 app/components/Viewer/ObjectTree/Layout.vue       |  6 +++---
 app/components/Viewer/Ui.vue                      |  2 +-
 17 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index cd8166724..115e76bcd 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -21,7 +21,7 @@ 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 />
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index e512c4636..d138fc419 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -172,7 +172,7 @@ 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"
diff --git a/app/components/FeedBack/ErrorBanner.vue b/app/components/FeedBack/ErrorBanner.vue
index 8b04b4844..a6558a254 100644
--- a/app/components/FeedBack/ErrorBanner.vue
+++ b/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>
diff --git a/app/components/FeedBack/Snackers.vue b/app/components/FeedBack/Snackers.vue
index 6ae99d34d..0b309728a 100644
--- a/app/components/FeedBack/Snackers.vue
+++ b/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">
diff --git a/app/components/HybridRenderingView.vue b/app/components/HybridRenderingView.vue
index 96a65c463..c46801e6c 100644
--- a/app/components/HybridRenderingView.vue
+++ b/app/components/HybridRenderingView.vue
@@ -12,7 +12,8 @@ const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 
-const { width: elementWidth, height: elementHeight } = useElementSize(container);
+const { width: elementWidth, height: elementHeight } =
+  useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
 const debouncedResize = debounce(() => {
@@ -58,10 +59,17 @@ async function handleClick(event) {
 
 <template>
   <ClientOnly>
-    <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
+    <div
+      data-testid="hybridViewer"
+      class="fill-height"
+      style="position: relative; height: 100%"
+    >
       <ViewToolbar />
       <slot name="ui"></slot>
-      <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
+      <HybridViewerTooltip
+        :container-width="elementWidth"
+        :container-height="elementHeight"
+      />
       <v-col
         class="pa-0"
         ref="viewer"
diff --git a/app/components/HybridViewerTooltip.vue b/app/components/HybridViewerTooltip.vue
index b0eb74714..3a5196c6a 100644
--- a/app/components/HybridViewerTooltip.vue
+++ b/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;
diff --git a/app/components/Launcher.vue b/app/components/Launcher.vue
index 18dfff138..aac2d9c13 100644
--- a/app/components/Launcher.vue
+++ b/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>
diff --git a/app/components/Loading.vue b/app/components/Loading.vue
index 349d90ef0..3ecc6b6f8 100644
--- a/app/components/Loading.vue
+++ b/app/components/Loading.vue
@@ -54,27 +54,20 @@ onUnmounted(() => {
       <div
         v-if="show"
         class="transition-swing overflow-y-auto"
-        style="
-          position: fixed;
+        style="position: fixed;
           inset: 0;
           width: 100vw;
           height: 100vh;
           background: rgba(0, 0, 0, 0.45);
-          backdrop-filter: blur(10px);
-          z-index: 2400;
-          pointer-events: auto;
-        "
+          backdrop-filter: blur(10px); pointer-events: auto; z-index: 3;"
       >
         <div
-          style="
-            position: fixed;
+          style="position: fixed;
             inset: 0;
             background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
             background-size: 40px 40px;
             background-position: center;
-            pointer-events: none;
-            z-index: -1;
-          "
+            pointer-events: none; z-index: 0;"
         />
 
         <div class="d-flex align-center justify-center pa-6" style="min-height: 100%">
diff --git a/app/components/RemoteRenderingView.vue b/app/components/RemoteRenderingView.vue
index 5e9a0c1ad..b260cf66c 100644
--- a/app/components/RemoteRenderingView.vue
+++ b/app/components/RemoteRenderingView.vue
@@ -105,7 +105,7 @@ 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 +117,7 @@ onMounted(async () => {
 <style scoped>
 .list {
   position: absolute;
-  z-index: 2;
+  z-index: 1;
   left: 0;
   top: 0;
   background-color: transparent;
diff --git a/app/components/ToolPanel.vue b/app/components/ToolPanel.vue
index 30afe4198..902a5dabc 100644
--- a/app/components/ToolPanel.vue
+++ b/app/components/ToolPanel.vue
@@ -62,7 +62,7 @@ function close() {
 
 <style scoped>
 .tool-panel {
-  z-index: 2;
+  z-index: 1;
   top: 90px;
   right: 55px;
 }
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index f31ee6a98..57d08dea2 100644
--- a/app/components/ViewToolbar.vue
+++ b/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);
diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 6e355de9a..7fccdb85b 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -74,7 +74,7 @@ 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"
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 532c0d08c..926dafd53 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/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 {
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index cf2b934ce..46b4df565 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/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>
diff --git a/app/components/Viewer/ObjectTree/Base/StickyHeader.vue b/app/components/Viewer/ObjectTree/Base/StickyHeader.vue
index dc2541091..ba80096af 100644
--- a/app/components/Viewer/ObjectTree/Base/StickyHeader.vue
+++ b/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 {
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 6d2e008a4..a4a592e8b 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/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 {
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index c5769ef73..d4e4daedb 100644
--- a/app/components/Viewer/Ui.vue
+++ b/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 {

From 19d70c72c3458fac0d86c040a2f1d0b5d769abee Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 28 May 2026 13:38:52 +0000
Subject: [PATCH 2/2] Apply prepare changes

---
 app/components/CameraManager.vue                  |  3 ++-
 app/components/CameraOrientation.vue              |  3 ++-
 app/components/FeedBack/ErrorBanner.vue           |  2 +-
 app/components/HybridRenderingView.vue            | 14 +++-----------
 app/components/Loading.vue                        | 15 +++++++++++----
 app/components/RemoteRenderingView.vue            |  3 ++-
 .../Viewer/ContextMenu/CenterButton.vue           |  3 ++-
 7 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/components/CameraManager.vue b/app/components/CameraManager.vue
index 115e76bcd..c1282893f 100644
--- a/app/components/CameraManager.vue
+++ b/app/components/CameraManager.vue
@@ -21,7 +21,8 @@ const { show_dialog, width } = defineProps({
     variant="panel"
     padding="pa-0"
     class="position-absolute elevation-24"
-    style="top: 90px; right: 55px" z-index="1"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <v-card-text class="pa-0">
       <Saver />
diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
index d138fc419..39882f1a6 100644
--- a/app/components/CameraOrientation.vue
+++ b/app/components/CameraOrientation.vue
@@ -172,7 +172,8 @@ watch(hoveredFace, (newFace, oldFace) => {
     v-model="show"
     title="Camera Orientations"
     :width="width"
-    style="top: 90px; right: 55px" z-index="1"
+    style="top: 90px; right: 55px"
+    z-index="1"
   >
     <div
       class="pa-0 overflow-hidden position-relative"
diff --git a/app/components/FeedBack/ErrorBanner.vue b/app/components/FeedBack/ErrorBanner.vue
index a6558a254..e254fb78d 100644
--- a/app/components/FeedBack/ErrorBanner.vue
+++ b/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: 4;"
+    style="background-color: grey; z-index: 4"
     position="fixed"
   >
     <v-row>
diff --git a/app/components/HybridRenderingView.vue b/app/components/HybridRenderingView.vue
index c46801e6c..96a65c463 100644
--- a/app/components/HybridRenderingView.vue
+++ b/app/components/HybridRenderingView.vue
@@ -12,8 +12,7 @@ const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 
-const { width: elementWidth, height: elementHeight } =
-  useElementSize(container);
+const { width: elementWidth, height: elementHeight } = useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
 const debouncedResize = debounce(() => {
@@ -59,17 +58,10 @@ async function handleClick(event) {
 
 <template>
   <ClientOnly>
-    <div
-      data-testid="hybridViewer"
-      class="fill-height"
-      style="position: relative; height: 100%"
-    >
+    <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
-      <HybridViewerTooltip
-        :container-width="elementWidth"
-        :container-height="elementHeight"
-      />
+      <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
       <v-col
         class="pa-0"
         ref="viewer"
diff --git a/app/components/Loading.vue b/app/components/Loading.vue
index 3ecc6b6f8..1a59ce7fb 100644
--- a/app/components/Loading.vue
+++ b/app/components/Loading.vue
@@ -54,20 +54,27 @@ onUnmounted(() => {
       <div
         v-if="show"
         class="transition-swing overflow-y-auto"
-        style="position: fixed;
+        style="
+          position: fixed;
           inset: 0;
           width: 100vw;
           height: 100vh;
           background: rgba(0, 0, 0, 0.45);
-          backdrop-filter: blur(10px); pointer-events: auto; z-index: 3;"
+          backdrop-filter: blur(10px);
+          pointer-events: auto;
+          z-index: 3;
+        "
       >
         <div
-          style="position: fixed;
+          style="
+            position: fixed;
             inset: 0;
             background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
             background-size: 40px 40px;
             background-position: center;
-            pointer-events: none; z-index: 0;"
+            pointer-events: none;
+            z-index: 0;
+          "
         />
 
         <div class="d-flex align-center justify-center pa-6" style="min-height: 100%">
diff --git a/app/components/RemoteRenderingView.vue b/app/components/RemoteRenderingView.vue
index b260cf66c..4c8879250 100644
--- a/app/components/RemoteRenderingView.vue
+++ b/app/components/RemoteRenderingView.vue
@@ -105,7 +105,8 @@ onMounted(async () => {
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
-        style="overflow: hidden; position: relative; height: 100%; width: 100%" z-index="0"
+        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)"
diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 7fccdb85b..546a11a86 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/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="1"
+    style="width: 52px; height: 52px"
+    z-index="1"
     :style="computedItemStyles"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"