wip

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -3,42 +3,28 @@
   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="content">
-    <div class="header">
-      <div class="header-left">
-        <UndoRedoControl store={screenHistoryStore} />
-      </div>
-      <div class="header-right">
-        {#if $store.clientFeatures.devicePreview}
-          <DevicePreviewSelect />
-        {/if}
-      </div>
+  <div class="header">
+    <div class="header-left">
+      <UndoRedoControl store={screenHistoryStore} />
     </div>
-    <div class="content">
-      {#key $store.version}
-        <AppPreview />
-      {/key}
+    <div class="header-right">
+      {#if $store.clientFeatures.devicePreview}
+        <DevicePreviewSelect />
+      {/if}
     </div>
   </div>
-  <div
-    role="separator"
-    class="divider"
-    use:resizableHandle
-  />
+  <div class="content">
+    {#key $store.version}
+      <AppPreview />
+    {/key}
+  </div>
 </div>
 
 <style>
   .app-panel {
-    display: flex;
-  }
-
-  .content {
     flex: 1 1 auto;
     overflow-y: auto;
     display: flex;
@@ -66,8 +52,4 @@
   .content {
     flex: 1 1 auto;
   }
-
-  .divider {
-    g
-  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte

@@ -1,21 +1,59 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
+  import { getHorizontalResizeActions } from './ScreenList/resizable';
+
+  const [resizable, resizableHandle] = getHorizontalResizeActions();
 </script>
 
-<div class="panel">
-  <ScreenList />
-  <ComponentList />
+<div class="panel" use:resizable>
+  <div class="content">
+    <ScreenList />
+    <ComponentList />
+  </div>
+  <div
+    class="divider"
+  >
+    <div class="dividerClickExtender"
+      role="separator"
+      use:resizableHandle
+     />
+  </div>
 </div>
 
 <style>
   .panel {
+    display: flex;
+    min-width: 250px;
     width: 310px;
     height: 100%;
-    border-right: var(--border-light);
+  }
+
+  .content {
+    flex-grow: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     background: var(--background);
     position: relative;
   }
+
+  .divider {
+    position: relative;
+    height: 100%;
+    width: 2px;
+    background: var(--spectrum-global-color-gray-200);
+    transition: background 130ms ease-out;
+  }
+  .divider:hover {
+    background: var(--spectrum-global-color-gray-300);
+    cursor: row-resize;
+  }
+
+  .dividerClickExtender {
+    position: absolute;
+    cursor: row-resize;
+    height: 100%;
+    width: 12px;
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js

@@ -20,6 +20,7 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
     let startPosition = null;
 
     const handleMouseMove = (e) => {
+      e.preventDefault(); // Prevent highlighting while dragging
       const change = e[mouseMoveEventProperty] - startPosition;
       element.style[cssProperty] = `${startProperty + change}px`
     }