From d986a9eb4f600315eb743cb10255c11cffbf3675 Mon Sep 17 00:00:00 2001
From: CJ <72030708+cj12312021@users.noreply.github.com>
Date: Mon, 24 Jun 2024 01:03:29 -0500
Subject: [PATCH] Address resize loop (#5004)

---
 .../src/components/Shared/GridCard/GridCard.tsx   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
index 911064a94..1d1a37528 100644
--- a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
@@ -42,9 +42,9 @@ interface IDimension {
   height: number;
 }
 
-export const useContainerDimensions = <
-  T extends HTMLElement = HTMLDivElement
->(): [MutableRefObject<T | null>, IDimension] => {
+export const useContainerDimensions = <T extends HTMLElement = HTMLDivElement>(
+  sensitivityThreshold = 20
+): [MutableRefObject<T | null>, IDimension] => {
   const target = useRef<T | null>(null);
   const [dimension, setDimension] = useState<IDimension>({
     width: 0,
@@ -53,7 +53,14 @@ export const useContainerDimensions = <
 
   useResizeObserver(target, (entry) => {
     const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
-    setDimension({ width, height });
+    let difference = Math.abs(dimension.width - width);
+    // Only adjust when width changed by a significant margin. This addresses the cornercase that sees
+    // the dimensions toggle back and forward when the window is adjusted perfectly such that overflow
+    // is trigger then immediable disabled because of a resize event then continues this loop endlessly.
+    // the scrollbar size varies between platforms. Windows is apparently around 17 pixels.
+    if (difference > sensitivityThreshold) {
+      setDimension({ width, height });
+    }
   });
 
   return [target, dimension];