From 23eabf9d850f62fbbc68b4a0a3383f8dd64f1624 Mon Sep 17 00:00:00 2001
From: Yu Yi Yang <yu-yi.yang@saucelabs.com>
Date: Wed, 11 Sep 2024 14:53:22 +0200
Subject: [PATCH] table header width

---
 examples/package-lock.json                    |  5 ++---
 .../NetworkTable/NetworkTableBody.jsx         | 20 ++++++++++---------
 src/hooks/useResizeObserver.js                |  2 +-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/examples/package-lock.json b/examples/package-lock.json
index ab89107..d1d5def 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -17,7 +17,7 @@
       }
     },
     "..": {
-      "version": "2.1.0",
+      "version": "2.4.2",
       "license": "MIT",
       "dependencies": {
         "@react-aria/overlays": "3.14.0",
@@ -84,8 +84,7 @@
         "typescript": "^4.9.5"
       },
       "peerDependencies": {
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1"
+        "react": "^16.13.1"
       }
     },
     "../node_modules/classnames": {},
diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx
index d827d4c..3bf6e13 100644
--- a/src/Components/NetworkTable/NetworkTableBody.jsx
+++ b/src/Components/NetworkTable/NetworkTableBody.jsx
@@ -50,22 +50,24 @@ const NetworkTableBody = ({ height }) => {
   const totalNetworkTime = state.get('totalNetworkTime');
   const selectedReqIndex = state.get('selectedReqIndex');
 
-  const ref = useRef(null);
-  const { elementDims } = useResizeObserver(ref?.current?._outerRef || ref?.current);
+  const listRef = useRef(null);
+  const { elementDims } = useResizeObserver(listRef);
 
-  useEffect(() => actions.setTableHeaderWidth(elementDims.width), [elementDims]);
+  useEffect(() => {
+    actions.setTableHeaderWidth(elementDims.width);
+  }, [elementDims]);
 
   useEffect(() => {
-    if (enableAutoScroll && ref?.current?._outerRef) {
-      const outerRef = ref?.current?._outerRef;
+    if (enableAutoScroll && listRef?.current?._outerRef) {
+      const outerRef = listRef?.current?._outerRef;
       const needToScroll = outerRef.scrollTop +
         outerRef.offsetHeight +
         (numberOfNewEntries * TABLE_ENTRY_HEIGHT) >= outerRef.scrollHeight;
       if (needToScroll) {
-        ref.current._outerRef.scrollTop = outerRef.scrollHeight;
+        listRef.current._outerRef.scrollTop = outerRef.scrollHeight;
       }
     }
-  }, [data, ref]);
+  }, [data, listRef]);
 
   const handleReqSelect = (payload) => {
     if (selectedReqIndex === payload.index) {
@@ -80,7 +82,7 @@ const NetworkTableBody = ({ height }) => {
   if (actualData.size === 0) {
     return (
       <div
-        ref={ref}
+        ref={listRef}
         className={Styles['no-data']}
       >
         <IconNetworkRequest className={Styles['network-icon']} />
@@ -98,7 +100,7 @@ const NetworkTableBody = ({ height }) => {
   return (
     <>
       <FixedSizeList
-        ref={ref}
+        ref={listRef}
         className={Styles['network-table-body']}
         height={height}
         itemCount={data.size}
diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js
index 477eec9..d2247a1 100644
--- a/src/hooks/useResizeObserver.js
+++ b/src/hooks/useResizeObserver.js
@@ -10,7 +10,7 @@ export const useResizeObserver = (elementRef) => {
   });
 
   useEffect(() => {
-    ref = elementRef?.current;
+    ref = elementRef?.current?._outerRef || elementRef?.current;
     const onResize = () => {
       if (ref) {
         setElementDims({