From 4138103f68cd704f59e07047e8f43d105f7b87e1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 8 Jun 2021 15:16:37 +0100
Subject: [PATCH] Improve client app overflow and selection indicators

---
 .../design/AppPreview/iframeTemplate.js           |  1 +
 .../design/[assetType]/_layout.svelte             |  1 -
 packages/client/src/components/ClientApp.svelte   | 15 ++++++++++++---
 .../client/src/components/HoverIndicator.svelte   |  9 ++++-----
 packages/client/src/components/Router.svelte      |  1 +
 .../src/components/SelectionIndicator.svelte      |  9 ++++-----
 packages/client/src/components/SettingsBar.svelte |  4 ++--
 7 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index f333359a26..c715cfc814 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -18,6 +18,7 @@ export default `
         padding: 0;
         height: 100%;
         width: 100%;
+        overflow: hidden;
       }
       body {
         padding: 2px;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index 38562fbfa7..0c4d0367f2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -194,7 +194,6 @@
     padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
   }
   .preview-content {
-    background: var(--background);
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
     flex: 1 1 auto;
   }
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index c1773facef..01bbe6c9af 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -64,7 +64,9 @@
     class="spectrum spectrum--medium spectrum--light"
   >
     <Provider key="user" data={$authStore} {actions}>
-      <Component definition={$screenStore.activeLayout.props} />
+      <div id="app-root">
+        <Component definition={$screenStore.activeLayout.props} />
+      </div>
       <NotificationDisplay />
       {#key $builderStore.selectedComponentId}
         {#if $builderStore.inBuilder && $builderStore.selectedComponent}
@@ -78,9 +80,16 @@
 {/if}
 
 <style>
-  div {
-    background: transparent;
+  #spectrum-root {
     height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+  #app-root {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
     position: relative;
   }
 </style>
diff --git a/packages/client/src/components/HoverIndicator.svelte b/packages/client/src/components/HoverIndicator.svelte
index d9808f7d96..1dcaa0f422 100644
--- a/packages/client/src/components/HoverIndicator.svelte
+++ b/packages/client/src/components/HoverIndicator.svelte
@@ -3,7 +3,6 @@
   import { builderStore } from "../store"
   import Indicator from "./Indicator.svelte"
 
-  const offset = 2
   let indicators = []
   let interval
   let componentId
@@ -24,10 +23,10 @@
         if (child) {
           const elBounds = child.getBoundingClientRect()
           newIndicators.push({
-            top: elBounds.top + scrollY - offset * 2,
-            left: elBounds.left + scrollX - offset * 2,
-            width: elBounds.width + offset * 2,
-            height: elBounds.height + offset * 2,
+            top: elBounds.top + scrollY - 2,
+            left: elBounds.left + scrollX - 2,
+            width: elBounds.width + 4,
+            height: elBounds.height + 4,
           })
         }
       }
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 545fae79d6..6c04bcad76 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -41,5 +41,6 @@
 <style>
   div {
     position: relative;
+    overflow-x: auto;
   }
 </style>
diff --git a/packages/client/src/components/SelectionIndicator.svelte b/packages/client/src/components/SelectionIndicator.svelte
index b34e6cab0d..a0265822bd 100644
--- a/packages/client/src/components/SelectionIndicator.svelte
+++ b/packages/client/src/components/SelectionIndicator.svelte
@@ -3,7 +3,6 @@
   import { builderStore } from "../store"
   import Indicator from "./Indicator.svelte"
 
-  const offset = 2
   let indicators = []
   let interval
 
@@ -21,10 +20,10 @@
       if (child) {
         const elBounds = child.getBoundingClientRect()
         newIndicators.push({
-          top: elBounds.top + scrollY - offset * 2,
-          left: elBounds.left + scrollX - offset * 2,
-          width: elBounds.width + offset * 2,
-          height: elBounds.height + offset * 2,
+          top: elBounds.top + scrollY - 2,
+          left: elBounds.left + scrollX - 2,
+          width: elBounds.width + 4,
+          height: elBounds.height + 4,
         })
       }
     }
diff --git a/packages/client/src/components/SettingsBar.svelte b/packages/client/src/components/SettingsBar.svelte
index 42d46bcbb2..e8bfa30d93 100644
--- a/packages/client/src/components/SettingsBar.svelte
+++ b/packages/client/src/components/SettingsBar.svelte
@@ -45,9 +45,9 @@
       if (newLeft < 0 || newLeft + width > innerWidth) {
         newLeft = elBounds.left + scrollX - horizontalOffset
         if (newLeft < 0 || newLeft + width > innerWidth) {
-          newLeft = innerWidth - width - 20
+          newLeft = elBounds.right + scrollX - width + horizontalOffset
           if (newLeft < 0 || newLeft + width > innerWidth) {
-            newLeft = 0
+            newLeft = horizontalOffset
           }
         }
       }