move position of screen nav item menu

packages/builder/src/components/common/NavItem.svelte

@@ -166,9 +166,10 @@
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xs);
-    width: max-content;
+    width: 100%;
     position: relative;
     padding-left: var(--spacing-l);
+    box-sizing: border-box;
   }
 
   /* Needed to fully display the actions icon */
@@ -266,6 +267,7 @@
   }
 
   .right {
+    margin-left: auto;
     order: 10;
   }
 </style>

packages/builder/src/components/design/Panel.svelte

@@ -66,6 +66,7 @@
 
 <style>
   .panel {
+    min-width: 260px;
     width: 260px;
     flex: 0 0 260px;
     background: var(--background);
@@ -83,6 +84,7 @@
     border-right: var(--border-light);
   }
   .panel.wide {
+    min-width: 310px;
     width: 310px;
     flex: 0 0 310px;
   }

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

@@ -25,6 +25,7 @@
 
 <style>
   .app-panel {
+    min-width: 410px;
     flex: 1 1 auto;
     overflow-y: auto;
     display: flex;

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

@@ -24,13 +24,13 @@
 <style>
   .panel {
     display: flex;
-    min-width: 250px;
+    min-width: 270px;
     width: 310px;
     height: 100%;
   }
 
   .content {
-    overflow: scroll;
+    overflow: hidden;
     flex-grow: 1;
     height: 100%;
     display: flex;

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

@@ -94,6 +94,7 @@
     {#if filteredScreens?.length}
       {#each filteredScreens as screen (screen._id)}
         <NavItem
+          scrollable
           icon={screen.routing.homeScreen ? "Home" : null}
           indentLevel={0}
           selected={$store.selectedScreenId === screen._id}
@@ -168,7 +169,7 @@
     background-color: transparent;
     border: none;
     font-size: var(--spectrum-alias-font-size-default);
-    width: 260px;
+    flex: 1;
     box-sizing: border-box;
     display: none;
   }

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

@@ -25,10 +25,16 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
       element.style[cssProperty] = `${startProperty + change}px`
     }
 
-    const handleMouseUp = () => {
+    const handleMouseUp = (e) => {
+      e.preventDefault(); // Prevent highlighting while dragging
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+
       element.style.removeProperty('transition'); // remove temporary transition override
+      for (let item of document.getElementsByTagName("iframe")) {
+        item.style.removeProperty("pointer-events");
+      }
+
       setValue(element[elementProperty]);
     }
 
@@ -48,6 +54,13 @@ const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty,
       }
 
       element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
+
+      // iframes swallow mouseup events if your cursor ends up over it during a drag, so make them
+      // temporarily non-interactive
+      for (let item of document.getElementsByTagName("iframe")) {
+        item.style.pointerEvents = "none";
+      }
+
       startProperty = element[elementProperty];
       startPosition = e[mouseMoveEventProperty];
 

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

@@ -40,6 +40,7 @@
   }
 
   .content {
+    width: 100vw;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;