Remove whitespace below tables and account for ability to add rows when determining min height

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

@@ -463,6 +463,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-weight: bold;
   }
   .header-cell.searching .name {
     opacity: 0;

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

@@ -4,7 +4,7 @@
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fade } from "svelte/transition"
-  import { GutterWidth, NewRowID } from "../lib/constants"
+  import { DefaultRowHeight, GutterWidth, NewRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
   import { getCellID } from "../lib/utils"
@@ -33,6 +33,7 @@
     columnRenderMap,
     visibleColumns,
     scrollTop,
+    height,
   } = getContext("grid")
 
   let visible = false
@@ -47,6 +48,8 @@
   $: hasNoRows = !$rows.length
   $: renderedRowCount = $renderedRows.length
   $: offset = getOffset($hasNextPage, renderedRowCount, $rowHeight, $scrollTop)
+  $: spaceBelow = $height - offset - $rowHeight
+  $: flipButtons = spaceBelow < 36 + DefaultRowHeight
 
   const getOffset = (hasNextPage, rowCount, rowHeight, scrollTop) => {
     // If we have a next page of data then we aren't truly at the bottom, so we
@@ -244,7 +247,11 @@
         </div>
       </GridScrollWrapper>
     </div>
-    <div class="buttons" transition:fade|local={{ duration: 130 }}>
+    <div
+      class="buttons"
+      class:flip={flipButtons}
+      transition:fade|local={{ duration: 130 }}
+    >
       <Button size="M" cta on:click={addRow} disabled={isAdding}>
         <div class="button-with-keys">
           Save
@@ -337,6 +344,9 @@
   .button-with-keys :global(> div) {
     padding-top: 2px;
   }
+  .buttons.flip {
+    top: calc(var(--offset) - 36px - var(--default-row-height) / 2);
+  }
 
   /* Sticky column styles */
   .sticky-column {

packages/frontend-core/src/components/grid/lib/constants.ts

@@ -2,8 +2,8 @@ export const SmallRowHeight = 36
 export const MediumRowHeight = 64
 export const LargeRowHeight = 92
 export const DefaultRowHeight = SmallRowHeight
-export const VPadding = SmallRowHeight * 2
-export const HPadding = 40
+export const VPadding = 0
+export const HPadding = 80
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200

packages/frontend-core/src/components/grid/stores/scroll.ts

@@ -58,6 +58,7 @@ export const deriveStores = (context: StoreContext) => {
     width,
     height,
     buttonColumnWidth,
+    props,
   } = context
 
   // Memoize store primitives
@@ -97,11 +98,14 @@ export const deriveStores = (context: StoreContext) => {
 
   // Derive vertical limits
   const contentHeight = derived(
-    [rows, rowHeight, showHScrollbar],
-    ([$rows, $rowHeight, $showHScrollbar]) => {
-      let height = ($rows.length + 1) * $rowHeight + VPadding
+    [rows, rowHeight, showHScrollbar, props],
+    ([$rows, $rowHeight, $showHScrollbar, $props]) => {
+      let height = $rows.length * $rowHeight + VPadding
       if ($showHScrollbar) {
-        height += ScrollBarSize * 2
+        height += ScrollBarSize * 3
+      }
+      if ($props.canAddRows) {
+        height += $rowHeight
       }
       return height
     }