From d6f33b219101508e4883b8390b5c56570873a917 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Aug 2024 16:13:47 +0100
Subject: [PATCH] Change how z-index is applied to the dragged element

---
 .../src/components/app/container/GridContainer.svelte |  5 ++++-
 .../src/components/preview/GridDNDHandler.svelte      | 11 +----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 39358484a6..6cc95e286e 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -150,7 +150,7 @@
     display: grid;
     gap: 0;
     grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
-    grid-template-columns: repeat(var(--cols), 1fr);
+    grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
     position: relative;
   }
   .underlay {
@@ -185,6 +185,9 @@
     outline: 2px solid var(--spectrum-global-color-static-blue-200);
     pointer-events: none !important;
   }
+  :global(.grid.highlight > .component.dragging) {
+    z-index: 999 !important;
+  }
 
   /* Ensure all top level children have grid styles applied */
   .grid :global(> .component) {
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 1d566f7416..db19c460c1 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -29,20 +29,11 @@
 
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
+  $: $instance?.setEphemeralStyles($styles)
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
 
-  const enrichComponentStyles = styles => {
-    let clone = { ...styles }
-    if (styles) {
-      clone["z-index"] = 999
-      clone["pointer-events"] = "none"
-    }
-    return clone
-  }
-
   const processEvent = Utils.domDebounce((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return