Merge pull request #13683 from Budibase/rework-grid-block-height

Rework table height to support percentages again

packages/client/src/components/app/GridBlock.svelte

@@ -37,6 +37,7 @@
 
   let grid
   let gridContext
+  let minHeight
 
   $: parsedColumns = getParsedColumns(columns)
   $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
@@ -51,8 +52,6 @@
       metadata: { dataSource: table },
     },
   ]
-  $: height = $component.styles?.normal?.height || "408px"
-  $: styles = getSanitisedStyles($component.styles)
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -129,23 +128,17 @@
     )
   }
 
-  const getSanitisedStyles = styles => {
-    return {
-      ...styles,
-      normal: {
-        ...styles?.normal,
-        height: undefined,
-      },
-    }
-  }
-
   onMount(() => {
     gridContext = grid.getContext()
+    gridContext.minHeight.subscribe($height => (minHeight = $height))
   })
 </script>
 
-<div use:styleable={styles} class:in-builder={$builderStore.inBuilder}>
-  <span style="--height:{height};">
+<span style="--min-height:{minHeight}px">
+  <div
+    use:styleable={$component.styles}
+    class:in-builder={$builderStore.inBuilder}
+  >
     <Grid
       bind:this={grid}
       datasource={table}
@@ -172,12 +165,15 @@
       isCloud={$environmentStore.cloud}
       on:rowclick={e => onRowClick?.({ row: e.detail })}
     />
-  </span>
-</div>
+  </div>
+</span>
 
 <Provider {data} {actions} />
 
 <style>
+  span {
+    display: contents;
+  }
   div {
     display: flex;
     flex-direction: column;
@@ -185,14 +181,10 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
     overflow: hidden;
+    height: 410px;
+    min-height: var(--min-height);
   }
   div.in-builder :global(*) {
     pointer-events: none;
   }
-  span {
-    display: contents;
-  }
-  span :global(.grid) {
-    height: var(--height);
-  }
 </style>

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

@@ -1,6 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, derived } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -111,8 +111,13 @@
     buttons,
     isCloud,
   })
-  $: minHeight =
-    Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)
+
+  // Derive min height and make available in context
+  const minHeight = derived(rowHeight, $height => {
+    const heightForControls = showControls ? ControlsHeight : 0
+    return Padding + SmallRowHeight + $height + heightForControls
+  })
+  context = { ...context, minHeight }
 
   // Set context for children to consume
   setContext("grid", context)
@@ -138,7 +143,7 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
 >
   {#if showControls}
     <div class="controls">