diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
deleted file mode 100644
index cd352557a5..0000000000
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import type { GridItem } from '../../types'
-	import InlineScriptEditorList from './InlineScriptEditorList.svelte'
-
-	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
-
-	export let gridItems: GridItem[]
-
-	export let selectedScriptComponentId: string | undefined = undefined
-</script>
-
-{#if gridItems}
-	{#each gridItems as gridComponent, index (index)}
-		{#if gridComponent.data}
-			{#if gridComponent.data.id === selectedScriptComponentId}
-				<InlineScriptEditorPanel
-					id={gridComponent.data.id}
-					bind:componentInput={gridComponent.data.componentInput}
-				/>
-			{:else if gridComponent.data.subGrids}
-				<InlineScriptEditorList
-					{selectedScriptComponentId}
-					bind:subgrids={gridComponent.data.subGrids}
-				/>
-			{/if}
-
-			{#if gridComponent.data.type === 'tablecomponent'}
-				{#each gridComponent.data.actionButtons as actionButton, index (index)}
-					{#if actionButton.id === selectedScriptComponentId}
-						<InlineScriptEditorPanel
-							id={actionButton.id}
-							bind:componentInput={actionButton.componentInput}
-						/>
-					{/if}
-				{/each}
-			{/if}
-		{/if}
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index bdde083bbe..737f2bb6e9 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -6,7 +6,8 @@
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
 	import EmptyInlineScript from './EmptyInlineScript.svelte'
-	import InlineScriptEditorRec from './InlineScriptEditorRec.svelte'
+	import { allItems } from '../../utils'
+	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { app, staticOutputs, runnableComponents } =
 		getContext<AppEditorContext>('AppEditorContext')
@@ -24,7 +25,25 @@
 				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
 
-			<InlineScriptEditorRec {selectedScriptComponentId} bind:gridItems={$app.grid} />
+			{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+				{#if gridItem.data.id === selectedScriptComponentId}
+					<InlineScriptEditorPanel
+						id={gridItem.data.id}
+						bind:componentInput={gridItem.data.componentInput}
+					/>
+				{/if}
+
+				{#if gridItem.data.type === 'tablecomponent'}
+					{#each gridItem.data.actionButtons as actionButton, index (index)}
+						{#if actionButton.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={actionButton.id}
+								bind:componentInput={actionButton.componentInput}
+							/>
+						{/if}
+					{/each}
+				{/if}
+			{/each}
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor