From ead4be7b88bc3052c78e8ded4fd1cb5c2221b627 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Aug 2024 09:09:53 +0100
Subject: [PATCH] Add padding at bottom of grid for screen level grids

---
 packages/client/src/components/Screen.svelte        |  2 +-
 .../components/app/container/GridContainer.svelte   | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index 3c8fcf97e3..2d62b2f810 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -14,7 +14,7 @@
 
   // Get the screen definition for the current route
   $: screen = $screenStore.activeScreen
-  $: screenDefinition = { cols: 24, rows: 24, ...screen?.props }
+  $: screenDefinition = { ...screen?.props, addEmptyRows: true }
   $: onLoadActions.set(screen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 6cc95e286e..d14108e178 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -4,6 +4,8 @@
   import { GridRowHeight, GridColumns } from "constants"
   import { memo } from "@budibase/frontend-core"
 
+  export let addEmptyRows = false
+
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
@@ -16,7 +18,7 @@
   let mounted = false
   let styles = memo({})
 
-  $: requiredRows = calculateRequiredRows($children, mobile)
+  $: requiredRows = calculateRequiredRows($children, mobile, addEmptyRows)
   $: requiredHeight = requiredRows * GridRowHeight
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)
@@ -39,7 +41,7 @@
 
   // Calculates the minimum number of rows required to render all child
   // components, on a certain device type
-  const calculateRequiredRows = (children, mobile) => {
+  const calculateRequiredRows = (children, mobile, addEmptyRows) => {
     const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
     let max = 2
     for (let id of Object.keys(children)) {
@@ -47,7 +49,12 @@
         max = children[id][key]
       }
     }
-    return max - 1
+    let rows = max - 1
+    if (addEmptyRows) {
+      return Math.ceil((rows + 10) / 10) * 10
+    } else {
+      return rows
+    }
   }
 
   // Stores metadata about a child node as constraints for determining grid size