git stash

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}
+    <div class="header">
-      <AppPreview />
+      <div class="header-left">
-    {/key}
+        <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>