From a80690f0bb0ef115f3df1d8450e067ef82c0011a Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Fri, 27 Jun 2025 02:10:06 +0000
Subject: [PATCH] feat: Add helper function to get ResizeObserver entry width
 for optimizing panel width management

---
 web/app/components/workflow/panel/index.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 75fd5b1509..863a2e3b23 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -14,6 +14,19 @@ export type PanelProps = {
   }
 }
 
+/**
+ * Reference MDN standard implementation：https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ */
+const getEntryWidth = (entry: ResizeObserverEntry, element: HTMLElement): number => {
+  if (entry.borderBoxSize?.length > 0)
+    return entry.borderBoxSize[0].inlineSize
+
+  if (entry.contentRect.width > 0)
+    return entry.contentRect.width
+
+  return element.getBoundingClientRect().width
+}
+
 const useResizeObserver = (
   callback: (width: number) => void,
   dependencies: React.DependencyList,
@@ -26,9 +39,7 @@ const useResizeObserver = (
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const { inlineSize } = entry.borderBoxSize[0]
-
-        const width = inlineSize > 0 ? inlineSize : element.getBoundingClientRect().width
+        const width = getEntryWidth(entry, element)
         callback(width)
       }
     })