Improve client app overflow and selection indicators

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;

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;
   }

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>

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,
           })
         }
       }

packages/client/src/components/Router.svelte

@@ -41,5 +41,6 @@
 <style>
   div {
     position: relative;
+    overflow-x: auto;
   }
 </style>

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,
         })
       }
     }

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
           }
         }
       }