Add padding to sheet

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

@@ -19,11 +19,17 @@
   $: width = $bounds.width
 
   // Calculate V scrollbar size and offset
+  // Terminology is the same for both axes:
+  //   contentX - the size of the rendered content
+  //   renderX - the space available to render the bar in, edge to edge
+  //   barX - the length of the bar
+  //   availX - the space available to render the bar in, until the edge
+  //   barX - the offset of the bar
   $: contentHeight = ($rows.length + 1) * cellHeight
   $: renderHeight = height - 2 * barOffset
   $: barHeight = Math.max(50, (height / contentHeight) * renderHeight)
   $: availHeight = renderHeight - barHeight
-  $: maxScrollTop = Math.max(contentHeight - height, 0)
+  $: maxScrollTop = Math.max(contentHeight - height + 180, 0)
   $: barTop = barOffset + cellHeight + availHeight * (scrollTop / maxScrollTop)
 
   // Calculate H scrollbar size and offset
@@ -32,7 +38,7 @@
   $: renderWidth = totalWidth - 2 * barOffset
   $: barWidth = Math.max(50, (totalWidth / contentWidth) * renderWidth)
   $: availWidth = renderWidth - barWidth
-  $: maxScrollLeft = Math.max(contentWidth - totalWidth, 0)
+  $: maxScrollLeft = Math.max(contentWidth - totalWidth + 180, 0)
   $: barLeft = barOffset + availWidth * (scrollLeft / maxScrollLeft)
 
   // Calculate whether to show scrollbars or not
@@ -43,18 +49,22 @@
   // rows or tables
   $: {
     if (scrollTop > maxScrollTop) {
-      scroll.update(state => ({
-        ...state,
-        top: maxScrollTop,
-      }))
+      setTimeout(() => {
+        scroll.update(state => ({
+          ...state,
+          top: maxScrollTop,
+        }))
+      })
     }
   }
   $: {
     if (scrollLeft > maxScrollLeft) {
-      scroll.update(state => ({
-        ...state,
-        left: maxScrollLeft,
-      }))
+      setTimeout(() => {
+        scroll.update(state => ({
+          ...state,
+          left: maxScrollLeft,
+        }))
+      })
     }
   }
 

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

@@ -116,7 +116,7 @@
     display: flex;
     flex-direction: row;
     justify-items: flex-start;
-    align-items: flex-start;
+    align-items: stretch;
     overflow: hidden;
     height: 0;
     position: relative;
@@ -126,6 +126,5 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-self: stretch;
   }
 </style>

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

@@ -1,9 +1,7 @@
-<svelte:options immutable={true} />
-
 <script>
   import { getContext } from "svelte"
   import SheetCell from "./SheetCell.svelte"
-  import { getCellComponent } from "./utils"
+  import { getCellRenderer } from "./renderers"
 
   export let row
 
@@ -34,7 +32,7 @@
       left={column.left}
     >
       <svelte:component
-        this={getCellComponent(column)}
+        this={getCellRenderer(column)}
         value={row[column.name]}
         schema={column.schema}
         selected={$selectedCellId === cellIdx}

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

@@ -71,7 +71,7 @@
     newScrollTop += offset
     newScrollTop = Math.min(
       newScrollTop,
-      ($rows.length + 1) * cellHeight - $bounds.height
+      ($rows.length + 1) * cellHeight - $bounds.height + 180
     )
     newScrollTop = Math.max(0, newScrollTop)
     scroll.update(state => ({
@@ -81,21 +81,20 @@
   }
 </script>
 
-<div
-  class="scroll-wrapper"
-  {style}
-  on:wheel|passive={wheelInteractive ? handleWheel : null}
->
-  <slot />
+<div on:wheel|passive={wheelInteractive ? handleWheel : null}>
+  <div class="scroll-wrapper" {style}>
+    <slot />
+  </div>
 </div>
 
 <style>
-  .scroll-wrapper {
+  div {
+    overflow: hidden;
     min-width: 100%;
     min-height: 100%;
-    background: var(--background-alt);
+  }
+  .scroll-wrapper {
     transform: translate3d(var(--offset-x), var(--offset-y), 0);
-    overflow: hidden;
     width: var(--width);
     height: var(--height);
   }

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

@@ -3,7 +3,7 @@
   import { Checkbox, Icon } from "@budibase/bbui"
   import { getIconForField } from "./utils"
   import SheetCell from "./SheetCell.svelte"
-  import { getCellComponent } from "./utils"
+  import { getCellRenderer } from "./renderers"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
 
   const {
@@ -112,7 +112,7 @@
               left="40"
             >
               <svelte:component
-                this={getCellComponent($stickyColumn)}
+                this={getCellRenderer($stickyColumn)}
                 value={row[$stickyColumn.name]}
                 schema={$stickyColumn.schema}
                 selected={$selectedCellId === cellIdx}

packages/frontend-core/src/components/sheet/renderers.js

@@ -0,0 +1,17 @@
+import OptionsCell from "./cells/OptionsCell.svelte"
+import DateCell from "./cells/DateCell.svelte"
+import MultiSelectCell from "./cells/MultiSelectCell.svelte"
+import NumberCell from "./cells/NumberCell.svelte"
+import RelationshipCell from "./cells/RelationshipCell.svelte"
+import TextCell from "./cells/TextCell.svelte"
+
+const TypeComponentMap = {
+  options: OptionsCell,
+  datetime: DateCell,
+  array: MultiSelectCell,
+  number: NumberCell,
+  link: RelationshipCell,
+}
+export const getCellRenderer = column => {
+  return TypeComponentMap[column?.schema?.type] || TextCell
+}

packages/frontend-core/src/components/sheet/utils.js

@@ -1,10 +1,3 @@
-import OptionsCell from "./cells/OptionsCell.svelte"
-import DateCell from "./cells/DateCell.svelte"
-import MultiSelectCell from "./cells/MultiSelectCell.svelte"
-import NumberCell from "./cells/NumberCell.svelte"
-import RelationshipCell from "./cells/RelationshipCell.svelte"
-import TextCell from "./cells/TextCell.svelte"
-
 export const getColor = idx => {
   if (idx == null || idx === -1) {
     return null
@@ -21,14 +14,3 @@ export const getIconForField = field => {
   }
   return "Text"
 }
-
-const TypeComponentMap = {
-  options: OptionsCell,
-  datetime: DateCell,
-  array: MultiSelectCell,
-  number: NumberCell,
-  link: RelationshipCell,
-}
-export const getCellComponent = column => {
-  return TypeComponentMap[column?.schema?.type] || TextCell
-}