Improve gutter cell usage

packages/frontend-core/src/components/grid/cells/GutterCell.svelte

@@ -11,6 +11,7 @@
   export let rowSelected
   export let disableExpand = false
   export let disableNumber = false
+  export let defaultHeight = false
 
   const { config, dispatch, selectedRows } = getContext("grid")
   const svelteDispatch = createEventDispatcher()
@@ -44,6 +45,7 @@
   width={GutterWidth}
   highlighted={rowFocused || rowHovered}
   selected={rowSelected}
+  {defaultHeight}
 >
   <div class="gutter">
     {#if $$slots.default}
@@ -111,6 +113,7 @@
   .expand {
     opacity: 0;
     pointer-events: none;
+    margin-right: 4px;
   }
   .expand.visible {
     opacity: 1;

packages/frontend-core/src/components/grid/layout/NewRowTop.svelte

@@ -7,6 +7,7 @@
   import { fade } from "svelte/transition"
   import { GutterWidth } from "../lib/constants"
   import { NewRowID } from "../lib/constants"
+  import GutterCell from "../cells/GutterCell.svelte"
 
   const {
     hoveredRowId,
@@ -116,16 +117,9 @@
       transition:fade={{ duration: 130 }}
       style="flex: 0 0 {width}px"
     >
-      <GridCell width={GutterWidth} rowFocused>
-        <div class="gutter">
-          <div class="number">
-            <Icon name="Add" />
-          </div>
-          {#if $config.allowExpandRows}
-            <Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
-          {/if}
-        </div>
-      </GridCell>
+      <GutterCell on:expand={addViaModal} rowHovered>
+        <Icon name="Add" />
+      </GutterCell>
       {#if $stickyColumn}
         {@const cellId = `new-${$stickyColumn.name}`}
         <DataCell
@@ -178,7 +172,7 @@
     align-items: stretch;
   }
   .container :global(.cell) {
-    --cell-background: var(--spectrum-global-color-gray-75);
+    --cell-background: var(--spectrum-global-color-gray-75) !important;
   }
 
   /* Underlay sits behind everything */

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -46,7 +46,12 @@
   class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
-    <GutterCell disableExpand disableNumber on:select={selectAll} />
+    <GutterCell
+      disableExpand
+      disableNumber
+      on:select={selectAll}
+      defaultHeight
+    />
     {#if $stickyColumn}
       <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
     {/if}