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

@@ -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
+    <div className="absolute inset-0 pointer-events-none z-sketchOverlayDropdown">
-      className="absolute inset-0 pointer-events-none"
-      style={{ zIndex: '99999999' }}
-    >
       {Object.entries(context.segmentOverlays)
         .flatMap((a) =>
           a[1].map((b) => ({ pathToNodeString: a[0], overlay: 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(

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',