From 3d1fcfa16a835327559b6f989b2df2e3332ca5d2 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 18 May 2023 08:18:50 +0200
Subject: [PATCH] Fix app drawer modal (#1594)

* feat(frontend): fix app drawer + modal

* feat(frontend): fix app
---
 .../components/apps/components/layout/AppDrawer.svelte | 10 ++++++++--
 .../src/lib/components/apps/editor/AppEditor.svelte    |  7 +++----
 2 files changed, 11 insertions(+), 6 deletions(-)

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>