From 582442502095837f96e0beb02058e98930eefe0b Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 23 Nov 2023 13:44:01 +0000
Subject: [PATCH] git stash

---
 .../[screenId]/_components/AppPanel.svelte    | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 09f97302fd..7cd3261bce 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -3,28 +3,42 @@
   import AppPreview from "./AppPreview.svelte"
   import { store, screenHistoryStore } from "builderStore"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
+  import { getHorizontalResizeActions } from './resizable';
+
+  const [resizable, resizableHandle] = getHorizontalResizeActions();
 </script>
 
 <div class="app-panel">
-  <div class="header">
-    <div class="header-left">
-      <UndoRedoControl store={screenHistoryStore} />
-    </div>
-    <div class="header-right">
-      {#if $store.clientFeatures.devicePreview}
-        <DevicePreviewSelect />
-      {/if}
-    </div>
-  </div>
   <div class="content">
-    {#key $store.version}
-      <AppPreview />
-    {/key}
+    <div class="header">
+      <div class="header-left">
+        <UndoRedoControl store={screenHistoryStore} />
+      </div>
+      <div class="header-right">
+        {#if $store.clientFeatures.devicePreview}
+          <DevicePreviewSelect />
+        {/if}
+      </div>
+    </div>
+    <div class="content">
+      {#key $store.version}
+        <AppPreview />
+      {/key}
+    </div>
   </div>
+  <div
+    role="separator"
+    class="divider"
+    use:resizableHandle
+  />
 </div>
 
 <style>
   .app-panel {
+    display: flex;
+  }
+
+  .content {
     flex: 1 1 auto;
     overflow-y: auto;
     display: flex;
@@ -52,4 +66,8 @@
   .content {
     flex: 1 1 auto;
   }
+
+  .divider {
+    g
+  }
 </style>