Simplify and improve z index styles

packages/frontend-core/src/components/sheet/HeaderRow.svelte

@@ -38,6 +38,8 @@
   .header {
     background: var(--background);
     border-bottom: var(--cell-border);
+    position: relative;
+    z-index: 1;
   }
   .row {
     display: flex;

packages/frontend-core/src/components/sheet/ResizeOverlay.svelte

@@ -20,8 +20,8 @@
   let columnCount = 0
 
   $: scrollLeft = $scroll.left
-  $: cutoff = scrollLeft + 40 + $columns[0]?.width || 0
-  $: offset = 40 + $stickyColumn?.width || 0
+  $: cutoff = scrollLeft + 40 + ($columns[0]?.width || 0)
+  $: offset = 40 + ($stickyColumn?.width || 0)
   $: rowCount = $visibleRows.length
   $: contentHeight = (rowCount + 2) * cellHeight
 
@@ -110,7 +110,7 @@
   .resize-slider {
     position: absolute;
     top: 0;
-    z-index: 10;
+    z-index: 1;
     height: var(--cell-height);
     left: var(--left);
     opacity: 0;
@@ -125,7 +125,7 @@
     height: min(var(--content-height), 100%);
   }
   .resize-slider.sticky {
-    z-index: 25;
+    z-index: 2;
   }
   .resize-indicator {
     margin-left: -1px;

packages/frontend-core/src/components/sheet/ScrollOverlay.svelte

@@ -112,7 +112,7 @@
     background: var(--spectrum-global-color-gray-600);
     opacity: 0.6;
     border-radius: 4px;
-    z-index: 20;
+    z-index: 999;
     transition: opacity 130ms ease-out;
   }
   div:hover {

packages/frontend-core/src/components/sheet/SheetCell.svelte

@@ -68,7 +68,6 @@
     background: var(--background);
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    z-index: 25;
     border-bottom: none;
   }
   .cell.header :global(> span) {
@@ -105,7 +104,6 @@
     border-right: none;
     position: sticky;
     left: 0;
-    z-index: 5;
     display: flex;
     flex-direction: row;
     justify-content: center;

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -81,7 +81,7 @@
     {/if}
   </div>
 
-  <div on:mouseleave={() => ($hoveredRowId = null)}>
+  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
     <SheetScrollWrapper scrollHorizontally={false}>
       {#each $visibleRows as row}
         {@const rowSelected = !!$selectedRows[row._id]}
@@ -154,11 +154,6 @@
   .sticky-column {
     flex: 0 0 calc(var(--width) + 0px);
   }
-  .sticky-column :global(.cell) {
-    z-index: 26;
-  }
-  .sticky-column.scrolled {
-  }
   .sticky-column.scrolled :global(.cell:not(.label):after) {
     content: " ";
     position: absolute;
@@ -171,7 +166,7 @@
   .header {
     border-bottom: var(--cell-border);
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
   .row {
     display: flex;
@@ -179,6 +174,10 @@
     justify-content: flex-start;
     align-items: stretch;
   }
+  .content {
+    position: relative;
+    z-index: 1;
+  }
   .row.new:hover :global(.cell) {
     cursor: pointer;
   }