Update position of indicators in preview to clip better

packages/client/src/components/preview/Indicator.svelte

@@ -18,10 +18,11 @@
   }}
   out:fade={{ duration: transition ? 130 : 0 }}
   class="indicator"
+  class:flipped={top < 20}
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
 >
   {#if text}
-    <div class="text" class:flipped={top < 22}>
+    <div class="text" class:flipped={top < 20}>
       {text}
     </div>
   {/if}
@@ -29,11 +30,17 @@
 
 <style>
   .indicator {
-    position: fixed;
+    position: absolute;
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .indicator.flipped {
+    border-top-left-radius: 4px;
   }
   .text {
     background-color: var(--color);
@@ -45,16 +52,17 @@
     padding: 0 8px 2px 8px;
     transform: translateY(-100%);
     font-size: 11px;
-    border-top-left-radius: 2px;
+    border-top-left-radius: 4px;
-    border-top-right-radius: 2px;
+    border-top-right-radius: 4px;
-    border-bottom-right-radius: 2px;
+    border-bottom-right-radius: 4px;
     white-space: nowrap;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .flipped {
+  .text.flipped {
+    border-top-left-radius: 4px;
     transform: translateY(0%);
     top: -2px;
   }

packages/client/src/components/preview/IndicatorSet.svelte

@@ -70,17 +70,22 @@
       updating = false
     }
 
+    const device = document.getElementById("app-root")
+    const deviceBounds = device.getBoundingClientRect()
     children.forEach((child, idx) => {
       const callback = createIntersectionCallback(idx)
       const threshold = children.length > 1 ? 1 : 0
-      const observer = new IntersectionObserver(callback, { threshold })
+      const observer = new IntersectionObserver(callback, {
+        threshold,
+        root: device,
+      })
       observer.observe(child)
       observers.push(observer)
 
       const elBounds = child.getBoundingClientRect()
       nextIndicators.push({
-        top: elBounds.top + scrollY - 2,
+        top: elBounds.top + scrollY - deviceBounds.top,
-        left: elBounds.left + scrollX - 2,
+        left: elBounds.left + scrollX - deviceBounds.left,
         width: elBounds.width + 4,
         height: elBounds.height + 4,
         visible: false,

packages/client/src/components/preview/SettingsBar.svelte

@@ -26,8 +26,10 @@
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
     const element = parent?.childNodes?.[0]
+    const device = document.getElementById("device-root")
     if (element && self) {
       // Batch reads to minimize reflow
+      const deviceBounds = device.getBoundingClientRect()
       const elBounds = element.getBoundingClientRect()
       const width = self.offsetWidth
       const height = self.offsetHeight
@@ -35,9 +37,16 @@
 
       // Vertically, always render above unless no room, then render inside
       let newTop = elBounds.top + scrollY - verticalOffset - height
+      if (newTop < deviceBounds.top - 50) {
+        newTop = deviceBounds.top - 50
+      }
       if (newTop < 0) {
         newTop = 0
       }
+      const deviceBottom = deviceBounds.top + deviceBounds.height
+      if (newTop > deviceBottom - 44) {
+        newTop = deviceBottom - 44
+      }
 
       // Horizontally, try to center first.
       // Failing that, render to left edge of component.