From 6010cfe2e28d73f9df1e995b986118989d3cdaec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 24 Oct 2022 13:08:53 +0100
Subject: [PATCH] Add some additional styles to grids to ensure components
 render properly

---
 .../client/src/components/app/Grid.svelte     | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/app/Grid.svelte b/packages/client/src/components/app/Grid.svelte
index 1c50d8c5b9..761d5a4378 100644
--- a/packages/client/src/components/app/Grid.svelte
+++ b/packages/client/src/components/app/Grid.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
 
   export let cols = 12
   export let rows = 12
@@ -11,6 +11,7 @@
 
   // Deliberately non-reactive as we want this fixed whenever the grid renders
   const defaultColSpan = Math.ceil((cols + 1) / 2)
+  console.log(defaultColSpan)
   const defaultRowSpan = Math.ceil((rows + 1) / 2)
 
   $: coords = generateCoords(rows, cols)
@@ -37,16 +38,20 @@
       "--rows": rows,
       "--default-col-span": defaultColSpan,
       "--default-row-span": defaultRowSpan,
+      padding: "0 !important",
+      gap: "0 !important",
     },
   }}
   data-rows={rows}
   data-cols={cols}
 >
-  <div class="underlay">
-    {#each coords as coord}
-      <div class="placeholder" />
-    {/each}
-  </div>
+  {#if $builderStore.inBuilder}
+    <div class="underlay">
+      {#each coords as coord}
+        <div class="placeholder" />
+      {/each}
+    </div>
+  {/if}
   <slot />
 </div>
 
@@ -69,6 +74,8 @@
     grid-column-end: var(--default-col-span);
     grid-row-start: 1;
     grid-row-end: var(--default-row-span);
+    max-height: 100%;
+    max-width: 100%;
   }
 
   .grid {
@@ -94,7 +101,6 @@
   .underlay {
     z-index: -1;
   }
-
   .placeholder {
     background-color: var(--spectrum-global-color-gray-100);
   }