From a1615055c350360045ad5d751643a4295bcabbc1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 10:28:19 +0100
Subject: [PATCH] Rename client app wrapper divs for clarity

---
 packages/client/src/components/ClientApp.svelte      | 12 ++++++------
 .../client/src/components/preview/SettingsBar.svelte |  8 +++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 63b5241168..5890c0e2a9 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -93,9 +93,9 @@
               {/if}
             {/key}
 
-            <!-- Device boundary -->
+            <!-- Clip boundary for selection indicators -->
             <div
-              id="device-root"
+              id="clip-root"
               class:preview={$builderStore.inBuilder}
               class:tablet-preview={$builderStore.previewDevice === "tablet"}
               class:mobile-preview={$builderStore.previewDevice === "mobile"}
@@ -144,7 +144,7 @@
     justify-content: center;
     align-items: center;
   }
-  #device-root {
+  #clip-root {
     max-width: 100%;
     max-height: 100%;
     width: 100%;
@@ -188,14 +188,14 @@
 
   /* Preview styles */
   /* The additional 6px of size is to account for 4px padding and 2px border */
-  #device-root.preview {
+  #clip-root.preview {
     padding: 2px;
   }
-  #device-root.tablet-preview {
+  #clip-root.tablet-preview {
     width: calc(1024px + 6px);
     height: calc(768px + 6px);
   }
-  #device-root.mobile-preview {
+  #clip-root.mobile-preview {
     width: calc(390px + 6px);
     height: calc(844px + 6px);
   }
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 8d268eb32e..3581d4f5f8 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -26,7 +26,13 @@
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
     const element = parent?.childNodes?.[0]
-    const device = document.getElementById("device-root")
+
+    // The settings bar is higher in the dom tree than the selection indicators
+    // as we want to be able to render the settings bar wider than the screen,
+    // or outside the screen.
+    // Therefore we use the clip root rather than the app root to determine
+    // its position.
+    const device = document.getElementById("clip-root")
     if (element && self) {
       // Batch reads to minimize reflow
       const deviceBounds = device.getBoundingClientRect()