From 23f5941bf52210eb42b2cc0dc5031717055bacb4 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 23 Nov 2023 17:05:49 +0000
Subject: [PATCH] move position of screen nav item menu

---
 .../builder/src/components/common/NavItem.svelte  |  4 +++-
 .../builder/src/components/design/Panel.svelte    |  2 ++
 .../design/[screenId]/_components/AppPanel.svelte |  1 +
 .../[screenId]/_components/LeftPanel.svelte       |  4 ++--
 .../_components/ScreenList/index.svelte           |  3 ++-
 .../_components/ScreenList/resizable.js           | 15 ++++++++++++++-
 .../design/[screenId]/_layout.svelte              |  1 +
 7 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 5ec399a7ea..1a18d92eca 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 6cfc65a1a4..f9190bea60 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/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;
   }
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..46eda34c2b 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
@@ -25,6 +25,7 @@
 
 <style>
   .app-panel {
+    min-width: 410px;
     flex: 1 1 auto;
     overflow-y: auto;
     display: flex;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index e6248b1d0a..2c8e0e4b0c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/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;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index 2e235754f2..d9567f3a8a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/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;
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
index 4b9f365018..61c8342c9e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
+++ b/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];
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 0e630b4f39..ab29f2ea0d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/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;