diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index bda4875df8..e07feec660 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -20,7 +20,7 @@
 	export let noWFull = false
 	export let render: boolean
 
-	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
+	const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = initConfig(
@@ -77,7 +77,13 @@
 <InitializeComponent {id} />
 
 <Portal target="#app-editor-top-level-drawer">
-	<Drawer let:open bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
+	<Drawer
+		let:open
+		bind:this={appDrawer}
+		size="800px"
+		alwaysOpen
+		positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'}
+	>
 		<DrawerContent
 			title={resolvedConfig.drawerTitle}
 			on:close={() => {
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 5f91699edf..51b74c1c0e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -212,7 +212,7 @@
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
 				<div
-					class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+					class={twMerge('h-full w-full relative', $appStore.css?.['app']?.['viewer']?.class)}
 					style={$appStore.css?.['app']?.['viewer']?.style}
 				>
 					<AppPreview
@@ -244,11 +244,12 @@
 											$focusedGrid = undefined
 										}}
 										class={twMerge(
-											'bg-gray-100 h-full w-full',
+											'bg-gray-100 h-full w-full relative',
 											$appStore.css?.['app']?.['viewer']?.class
 										)}
 										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
+										<div id="app-editor-top-level-drawer" />
 										<div
 											class={classNames(
 												'relative mx-auto w-full h-full overflow-auto',
@@ -261,8 +262,6 @@
 												<div on:pointerdown|stopPropagation class={twMerge(width, 'mx-auto')}>
 													<GridEditor {policy} />
 												</div>
-
-												<div id="app-editor-top-level-drawer" />
 											{/if}
 										</div>
 									</div>