From 9f5003cafc3d29ff3dbed8a2473c243adc629928 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@zoo.dev>
Date: Thu, 20 Feb 2025 13:53:35 -0500
Subject: [PATCH] Make z-index relation between sketch scene items explicit and
 colocated (#5435)

* Set up start of semantic z-index layers in tailwind.config.js

* Use first two active semantic z-index layers to fix just this issue
---
 src/clientSideScene/ClientSideSceneComp.tsx |  5 +----
 src/clientSideScene/sceneInfra.ts           |  1 +
 tailwind.config.js                          | 15 +++++++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/clientSideScene/ClientSideSceneComp.tsx b/src/clientSideScene/ClientSideSceneComp.tsx
index 4ca9d9852..7933b9266 100644
--- a/src/clientSideScene/ClientSideSceneComp.tsx
+++ b/src/clientSideScene/ClientSideSceneComp.tsx
@@ -179,10 +179,7 @@ const Overlays = () => {
   // Set a large zIndex, the overlay for hover dropdown menu on line segments needs to render
   // over the length labels on the line segments
   return (
-    <div
-      className="absolute inset-0 pointer-events-none"
-      style={{ zIndex: '99999999' }}
-    >
+    <div className="absolute inset-0 pointer-events-none z-sketchOverlayDropdown">
       {Object.entries(context.segmentOverlays)
         .flatMap((a) =>
           a[1].map((b) => ({ pathToNodeString: a[0], overlay: b }))
diff --git a/src/clientSideScene/sceneInfra.ts b/src/clientSideScene/sceneInfra.ts
index ffc21ef4f..04347ca2b 100644
--- a/src/clientSideScene/sceneInfra.ts
+++ b/src/clientSideScene/sceneInfra.ts
@@ -291,6 +291,7 @@ export class SceneInfra {
     this.labelRenderer.domElement.style.position = 'absolute'
     this.labelRenderer.domElement.style.top = '0px'
     this.labelRenderer.domElement.style.pointerEvents = 'none'
+    this.labelRenderer.domElement.className = 'z-sketchSegmentIndicators'
     window.addEventListener('resize', this.onWindowResize)
 
     this.camControls = new CameraControls(
diff --git a/tailwind.config.js b/tailwind.config.js
index 3ed922086..1db35dac1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,6 +43,21 @@ module.exports = {
         'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
         sans-serif`,
       },
+      /**
+       * We want the z-index of major UI areas
+       * to be consolidated in this one spot,
+       * so we can make sure they coordinate.
+       */
+      zIndex: {
+        // TODO change use of `z-<number>` to use these instead
+        // underlay: '-1',
+        // tooltip: '1',
+        // commandBar: '2',
+        // modal: '3',
+        sketchSegmentIndicators: '5',
+        sketchOverlayDropdown: '6',
+        // top: '99',
+      },
     },
   },
   darkMode: 'class',