From 8aa040723676b20f5da504822e9a293bf0eb35e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 9 Aug 2024 19:09:32 +0100
Subject: [PATCH] Hide resize indicators when they don't fit

---
 .../client/src/components/preview/Indicator.svelte | 14 ++++++++++++--
 .../src/components/preview/IndicatorSet.svelte     | 12 ++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 605611d3a1..112d392354 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -34,6 +34,8 @@
   class:line
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
   class:withText={!!text}
+  class:vCompact={height < 40}
+  class:hCompact={width < 40}
 >
   {#if text || icon}
     <div class="label" class:flipped class:line class:right={alignRight}>
@@ -153,15 +155,23 @@
   }
   .anchor.right .anchor-inner,
   .anchor.left .anchor-inner {
-    height: calc(var(--size) * 1.4);
+    height: calc(var(--size) * 1.2);
     width: calc(var(--size) * 0.3);
   }
   .anchor.top .anchor-inner,
   .anchor.bottom .anchor-inner {
-    width: calc(var(--size) * 1.4);
+    width: calc(var(--size) * 1.2);
     height: calc(var(--size) * 0.3);
   }
 
+  /* Hide side indicators when they don't fit */
+  .indicator.hCompact .anchor.top,
+  .indicator.hCompact .anchor.bottom,
+  .indicator.vCompact .anchor.left,
+  .indicator.vCompact .anchor.right {
+    display: none;
+  }
+
   /* Anchor positions */
   .anchor.right {
     left: calc(100% + 1px);
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 464be3bb16..57821b4da4 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -1,9 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { componentStore, builderStore } from "stores"
+  import { builderStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
-  import { writable } from "svelte/store"
   import { isGridChild } from "utils/grid"
 
   export let componentId = null
@@ -51,15 +50,8 @@
   })
   $: $config, debouncedUpdate()
 
-  // Update position when component state changes
-  $: instance = componentStore.actions.getComponentInstance(componentId)
-  $: componentState = $instance?.state || writable()
-  $: $componentState, debouncedUpdate()
-
   const checkInsideGrid = id => {
-    const component = document.getElementsByClassName(id)[0]
-    const domNode = component?.children[0]
-    return isGridChild(domNode)
+    return isGridChild(document.getElementsByClassName(id)[0])
   }
 
   const createIntersectionCallback = idx => entries => {