Merge pull request #14768 from Budibase/fix-container-on-click-grid

Add on click events for grid layout containers

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 onClick
+
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
   const context = getContext("context")
@@ -121,15 +123,19 @@
   })
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={ref}
   class="grid"
   class:mobile
+  class:clickable={!!onClick}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={$styles}
   data-cols={GridColumns}
   data-col-size={colSize}
+  on:click={onClick}
 >
   {#if inBuilder}
     <div class="underlay">
@@ -176,6 +182,9 @@
   .placeholder.first-col {
     border-left: 1px solid var(--spectrum-global-color-gray-900);
   }
+  .clickable {
+    cursor: pointer;
+  }
 
   /* Highlight grid lines when resizing children */
   :global(.grid.highlight > .underlay) {