From bed6fe607cb0ddc9ef69cbc41e7717fc0f398307 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Apr 2023 12:28:34 +0100
Subject: [PATCH] Ensure dynamic row height is properly accounted for

---
 .../src/components/sheet/cells/HeaderCell.svelte            | 3 ++-
 .../src/components/sheet/cells/SheetCell.svelte             | 5 +++++
 .../src/components/sheet/layout/HeaderRow.svelte            | 2 +-
 .../src/components/sheet/layout/StickyColumn.svelte         | 2 +-
 .../src/components/sheet/overlays/ScrollOverlay.svelte      | 6 ++++--
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
index 3602d37097..0d3d74c979 100644
--- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
@@ -99,7 +99,7 @@
 <div
   class="header-cell"
   class:open
-  style="flex: 0 0 {column.width}px"
+  style="flex: 0 0 {column.width}px;"
   bind:this={anchor}
   class:disabled={$isReordering || $isResizing}
   class:sorted={sortedBy}
@@ -110,6 +110,7 @@
     on:contextmenu={onContextMenu}
     width={column.width}
     left={column.left}
+    defaultHeight
   >
     <Icon
       size="S"
diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
index 376e00627e..006e238234 100644
--- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
@@ -6,6 +6,7 @@
   export let selectedUser = null
   export let error = null
   export let rowIdx
+  export let defaultHeight = false
 
   $: style = getStyle(width, selectedUser)
 
@@ -24,6 +25,7 @@
   class:highlighted
   class:focused
   class:error
+  class:default-height={defaultHeight}
   class:selected-other={selectedUser != null}
   on:focus
   on:mousedown
@@ -64,6 +66,9 @@
     width: 0;
     --cell-color: transparent;
   }
+  .cell.default-height {
+    height: var(--default-row-height);
+  }
 
   /* Cell border */
   .cell.focused:after,
diff --git a/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte b/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
index c2cf920d5d..1e43c34af0 100644
--- a/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
@@ -21,7 +21,7 @@
     background: var(--background);
     border-bottom: var(--cell-border);
     position: relative;
-    height: var(--row-height);
+    height: var(--default-row-height);
     z-index: 1;
   }
   .row {
diff --git a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
index e38f43b3c1..fc03b2b55b 100644
--- a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
@@ -58,7 +58,7 @@
   class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
-    <SheetCell width={GutterWidth}>
+    <SheetCell width={GutterWidth} defaultHeight>
       <div class="gutter">
         <div class="checkbox visible">
           {#if $config.allowDeleteRows}
diff --git a/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
index 655d445460..23465101d9 100644
--- a/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { domDebounce } from "../../../utils/utils"
-  import { ScrollBarSize } from "../lib/constants"
+  import { DefaultRowHeight, ScrollBarSize } from "../lib/constants"
 
   const {
     scroll,
@@ -30,7 +30,9 @@
   $: barHeight = Math.max(50, ($height / $contentHeight) * renderHeight)
   $: availHeight = renderHeight - barHeight
   $: barTop =
-    ScrollBarSize + $rowHeight + availHeight * ($scrollTop / $maxScrollTop)
+    ScrollBarSize +
+    DefaultRowHeight +
+    availHeight * ($scrollTop / $maxScrollTop)
 
   // Calculate H scrollbar size and offset
   $: renderWidth = $screenWidth - 2 * ScrollBarSize