Fix row hover state not being removed

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

@@ -15,7 +15,11 @@
   }
 </script>
 
-<div class="row" on:mouseover={() => ($hoveredRowId = "new")}>
+<div
+  class="row"
+  on:mouseover={() => ($hoveredRowId = "new")}
+  on:mouseleave={() => ($hoveredRowId = null)}
+>
   {#each $visibleColumns as column}
     <SheetCell
       {rowHovered}
@@ -30,6 +34,7 @@
 
 <style>
   .row {
+    width: 0;
     display: flex;
   }
   .row:hover :global(.cell) {

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

@@ -2,7 +2,7 @@
   import { getContext, onMount } from "svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
 
-  const { selectedCellId, hoveredRowId, bounds } = getContext("spreadsheet")
+  const { selectedCellId, bounds } = getContext("spreadsheet")
 
   let ref
 
@@ -22,7 +22,6 @@
   bind:this={ref}
   class="sheet-body"
   on:click|self={() => ($selectedCellId = null)}
-  on:mouseleave={() => ($hoveredRowId = null)}
 >
   <SheetScrollWrapper>
     <slot />

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

@@ -18,7 +18,11 @@
   $: rowHovered = $hoveredRowId === row._id
 </script>
 
-<div class="row" on:mouseover={() => ($hoveredRowId = row._id)}>
+<div
+  class="row"
+  on:mouseover={() => ($hoveredRowId = row._id)}
+  on:mouseleave={() => ($hoveredRowId = null)}
+>
   {#each $visibleColumns as column (column.name)}
     {@const cellIdx = `${row._id}-${column.name}`}
     <SheetCell
@@ -45,6 +49,7 @@
 
 <style>
   .row {
+    width: 0;
     display: flex;
   }
 </style>

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

@@ -155,7 +155,7 @@
     flex: 0 0 var(--width);
     z-index: 20;
     overflow: visible;
-    border-right: 1px solid var(--spectrum-global-color-gray-200);
+    border-right: var(--cell-border);
   }
   .sticky-column.scrolled {
     box-shadow: 1px -4px 8px rgba(0, 0, 0, 0.1);