Improve styles

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

@@ -8,7 +8,7 @@
   const { visibleColumns, reorder } = getContext("spreadsheet")
 </script>
 
-<div>
+<div class="header">
   <SheetScrollWrapper scrollVertically={false} wheelInteractive={false}>
     <div class="row">
       {#each $visibleColumns as column}
@@ -35,6 +35,10 @@
 </div>
 
 <style>
+  .header {
+    background: var(--background);
+    border-bottom: var(--cell-border);
+  }
   .row {
     display: flex;
   }

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

@@ -105,6 +105,7 @@
     --cell-spacing: 4px;
     --cell-font-size: 14px;
     --controls-height: 50px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
   }
   .sheet,
   .sheet :global(*) {

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

@@ -32,11 +32,8 @@
   /* Cells */
   .cell {
     height: var(--cell-height);
-    border-style: solid;
-    border-color: var(--spectrum-global-color-gray-200);
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
+    border-bottom: var(--cell-border);
+    border-right: var(--cell-border);
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -45,7 +42,6 @@
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
-    transition: border-color 130ms ease-out;
     flex: 0 0 var(--width);
     position: relative;
     width: 0;
@@ -71,9 +67,9 @@
   .cell.header {
     background: var(--background);
     padding: 0 var(--cell-padding);
-    border-color: var(--spectrum-global-color-gray-200);
     gap: calc(2 * var(--cell-spacing));
     z-index: 10;
+    border-bottom: none;
   }
   .cell.header :global(> span) {
     flex: 1 1 auto;
@@ -106,7 +102,7 @@
   .cell.label {
     padding: var(--cell-padding);
     flex: 0 0 40px;
-    border-right-width: 0;
+    border-right: none;
     position: sticky;
     left: 0;
     z-index: 5;

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

@@ -54,7 +54,7 @@
   style="--width:{width}px;"
   class:scrolled={scrollLeft > 0}
 >
-  <div class="row">
+  <div class="header row">
     <!-- Field headers -->
     <SheetCell header label on:click={selectAll} width="40" left="0">
       <Checkbox value={rowCount && selectedRowCount === rowCount} />
@@ -160,6 +160,9 @@
     border-right-width: 0;
   }
 
+  .header {
+    border-bottom: var(--cell-border);
+  }
   .row {
     display: flex;
     flex-direction: row;