diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 42a2fafbdd..1855166e0c 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -25,7 +25,9 @@
   // Local flag for whether we are awaiting an async drop event
   let dropping = false
 
-  const insideGrid = e => {
+  // Util to check if a DND event originates from a grid (or inside a grid).
+  // This is important as we do not handle grid DND in this handler.
+  const isGridEvent = e => {
     return e.target
       ?.closest?.(".component")
       ?.parentNode?.closest?.(".component")
@@ -69,7 +71,7 @@
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    if (insideGrid(e)) {
+    if (isGridEvent(e)) {
       return
     }
     const component = e.target.closest(".component")
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 61bd8db08f..46e2e575b0 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -17,7 +17,9 @@
     ...(gridStyles ? { "z-index": 999 } : null),
   })
 
-  const isChildOfGrid = e => {
+  // Util to check if a DND event originates from a grid (or inside a grid).
+  // This is important as we do not handle grid DND in this handler.
+  const isGridEvent = e => {
     return (
       e.target
         .closest?.(".component")
@@ -113,7 +115,7 @@
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    if (!isChildOfGrid(e)) {
+    if (!isGridEvent(e)) {
       return
     }