From 919c4d95c57bd0e3d58403cd29fdbe31abdc2258 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 14 Aug 2024 15:24:48 +0100
Subject: [PATCH] Fix issue with side panel position

---
 .../client/src/components/ClientApp.svelte    |  1 +
 .../client/src/components/app/Layout.svelte   | 34 +++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 516f505d21..2f8ba36cf7 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -324,6 +324,7 @@
     justify-content: flex-start;
     align-items: stretch;
     overflow: hidden;
+    position: relative;
   }
 
   .error {
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 2426aeaed9..8ce651d173 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -322,25 +322,23 @@
         <slot />
       </div>
     </div>
-    <div
-      id="side-panel-container"
-      class:open={$sidePanelStore.open}
-      use:clickOutside={autoCloseSidePanel
-        ? sidePanelStore.actions.close
-        : null}
-      class:builder={$builderStore.inBuilder}
-    >
-      <div class="side-panel-header">
-        <Icon
-          color="var(--spectrum-global-color-gray-600)"
-          name="RailRightClose"
-          hoverable
-          on:click={sidePanelStore.actions.close}
-        />
-      </div>
-    </div>
-    <div class="modal-container" />
   </div>
+  <div
+    id="side-panel-container"
+    class:open={$sidePanelStore.open}
+    use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null}
+    class:builder={$builderStore.inBuilder}
+  >
+    <div class="side-panel-header">
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={sidePanelStore.actions.close}
+      />
+    </div>
+  </div>
+  <div class="modal-container" />
 </div>
 
 <style>