From de9b80e23dd8a4a6a5abfa96a64ab0b56925a7e2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:03:29 +0100
Subject: [PATCH] Multiple style improvements and pixel layout fixes

---
 packages/client/src/components/ClientApp.svelte  | 16 +++++-----------
 packages/client/src/components/Component.svelte  |  3 ++-
 .../app/container/GridContainer.svelte           |  1 +
 .../src/components/preview/Indicator.svelte      |  9 +++++----
 .../src/components/preview/IndicatorSet.svelte   |  7 ++++---
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 763c8ef771..d0369192a0 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -356,22 +356,16 @@
   }
 
   /* Preview styles */
-  /* The additional 6px of size is to account for 4px padding and 2px border */
   #clip-root.preview {
-    padding: 2px;
+    padding: 6px;
   }
   #clip-root.tablet-preview {
-    width: calc(1024px + 6px);
-    height: calc(768px + 6px);
+    width: calc(1024px + 12px);
+    height: calc(768px + 12px);
   }
   #clip-root.mobile-preview {
-    width: calc(390px + 6px);
-    height: calc(844px + 6px);
-  }
-
-  .preview #app-root {
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
+    width: calc(390px + 12px);
+    height: calc(844px + 12px);
   }
 
   /* Print styles */
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 85c6dc6e36..6ff6fa00fc 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -619,6 +619,7 @@
     if (isBlock) {
       return
     }
+    console.log("select", id)
     e.stopPropagation()
     builderStore.actions.selectComponent(id)
   }
@@ -691,7 +692,7 @@
     data-parent={$component.id}
     style={wrapperCSS}
     {draggable}
-    on:click={handleWrapperClick}
+    on:click|self={handleWrapperClick}
   >
     {#if errorState}
       <ComponentErrorState
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 3e58fef787..f9394415be 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -96,6 +96,7 @@
   .grid :global(> .component) {
     display: flex;
     overflow: auto;
+    pointer-events: all;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index ae6ed081a5..d93ecaa02b 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -69,7 +69,7 @@
     z-index: var(--zIndex);
     border: 2px solid var(--color);
     pointer-events: none;
-    border-radius: 2px;
+    border-radius: 4px;
   }
   .indicator.withText {
     border-top-left-radius: 0;
@@ -123,7 +123,7 @@
 
   /* Anchor */
   .anchor {
-    --size: 24px;
+    --size: 20px;
     position: absolute;
     width: var(--size);
     height: var(--size);
@@ -133,11 +133,12 @@
     border-radius: 50%;
   }
   .anchor-inner {
-    width: 12px;
-    height: 12px;
+    width: calc(var(--size) / 2);
+    height: calc(var(--size) / 2);
     background: white;
     border: 2px solid var(--color);
     pointer-events: none;
+    border-radius: 2px;
   }
   .anchor.right {
     right: calc(var(--size) / -2 - 1px);
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index aff62a76a7..6d7918244a 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -11,6 +11,8 @@
   export let prefix = null
   export let allowResizeAnchors = false
 
+  // Offset = 6 (clip-root padding) - 1 (half the border thickness)
+  const offset = 6 - 1
   const config = memo($$props)
   const errorColor = "var(--spectrum-global-color-static-red-600)"
   const defaultState = () => ({
@@ -146,11 +148,10 @@
       })
       observer.observe(child)
       observers.push(observer)
-
       const elBounds = child.getBoundingClientRect()
       nextState.indicators.push({
-        top: Math.round(elBounds.top + scrollY - deviceBounds.top + 1),
-        left: Math.round(elBounds.left + scrollX - deviceBounds.left + 1),
+        top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
+        left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
         width: Math.round(elBounds.width + 2),
         height: Math.round(elBounds.height + 2),
         visible: false,