From 5d970d4c1fa3757e22273cf47cd5a927a05eb96e Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Thu, 29 Feb 2024 13:51:03 +0100
Subject: [PATCH] Fix NaN height issue

---
 src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 13 +++----------
 .../Tabs/DocumentsTabV2/DocumentsTableComponent.tsx |  2 +-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 09badf11a..80117b852 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -448,16 +448,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
     if (!tableContainerRef.current) {
       return undefined;
     }
-
-    const resizeObserver = new ResizeObserver(() => {
-      // Do what you want to do when the size of the element changes
-      setTableContainerHeightPx(tableContainerRef.current.offsetHeight);
-      console.log('height', tableContainerRef.current.offsetHeight);
-    });
+    const resizeObserver = new ResizeObserver(() => tableContainerRef.current.offsetHeight !== undefined && setTableContainerHeightPx(tableContainerRef.current.offsetHeight));
     resizeObserver.observe(tableContainerRef.current);
     return () => resizeObserver.disconnect(); // clean up
-
-
   }, []);
 
   return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
@@ -571,9 +564,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
       {/* <Split> doesn't like to be a flex child */}
       <div style={{ overflow: "hidden", height: "100%" }}>
         <Split>
-          <div style={{ minWidth: 440, width: "20%", display: "flex", flexDirection: "column", height: "100%" }}
+          <div style={{ minWidth: 440, width: "20%", display: "flex", height: "100%" }}
             ref={tableContainerRef}>
-            <DocumentsTableComponent style={{ width: "100%", height: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} height={tableContainerHeightPx} />
+            <DocumentsTableComponent style={{ width: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} height={tableContainerHeightPx} />
           </div>
           <div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
         </Split>
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 53e783aa3..428c3162f 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -235,7 +235,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       </TableHeader>
       <TableBody style={{ height: "100%", flex: 1 }}>
         <List
-          height={height - 32}
+          height={height !== undefined ? height - 32 : 0}
           itemCount={items.length}
           itemSize={45}
           width="100%"