From 416743c548e14cfe72757063d6ce877b6e4dac96 Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Thu, 6 Jun 2024 09:33:25 -0700
Subject: [PATCH] stop tree nodes from expanding to full height, causing
 overlap (#1861)

---
 .../TreeComponent/TreeNodeComponent.tsx       |  1 -
 .../TreeNodeComponent.test.tsx.snap           | 97 -------------------
 src/Explorer/Tree/ResourceTree.tsx            |  2 +-
 3 files changed, 1 insertion(+), 99 deletions(-)

diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
index fb60aab2e..9ec2c904a 100644
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -150,7 +150,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       data-test={`TreeNodeContainer:${treeNodeId}`}
       value={treeNodeId}
       itemType={isBranch ? "branch" : "leaf"}
-      style={{ height: "100%" }}
       onOpenChange={onOpenChange}
     >
       <TreeItemLayout
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
index d6122a2f4..658e01e0c 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
@@ -5,11 +5,6 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -118,11 +113,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
     data-test="TreeNodeContainer:root"
     itemType="branch"
     onOpenChange={[Function]}
-    style={
-      Object {
-        "height": "100%",
-      }
-    }
     value="root"
   >
     <div
@@ -136,11 +126,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
       onClick={[Function]}
       onKeyDown={[Function]}
       role="treeitem"
-      style={
-        Object {
-          "height": "100%",
-        }
-      }
       tabIndex={-1}
     >
       <ContextSelector.Provider
@@ -233,7 +218,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 data-fui-tree-item-value="root"
                 data-test="TreeNodeContainer:root"
                 role="treeitem"
-                style="height: 100%;"
                 tabindex="-1"
               >
                 <div
@@ -288,7 +272,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child1Label"
                     data-test="TreeNodeContainer:root/child1Label"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="0"
                   >
                     <div
@@ -340,7 +323,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child2LoadingLabel"
                     data-test="TreeNodeContainer:root/child2LoadingLabel"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="-1"
                   >
                     <div
@@ -391,7 +373,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-fui-tree-item-value="root/child3ExpandingLabel"
                     data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     role="treeitem"
-                    style="height: 100%;"
                     tabindex="-1"
                   >
                     <div
@@ -647,11 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child1Label"
                     itemType="branch"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child1Label"
                   >
                     <div
@@ -665,11 +641,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -762,7 +733,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child1Label"
                                 data-test="TreeNodeContainer:root/child1Label"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="0"
                               >
                                 <div
@@ -945,11 +915,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child2LoadingLabel"
                     itemType="branch"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child2LoadingLabel"
                   >
                     <div
@@ -963,11 +928,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -1060,7 +1020,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child2LoadingLabel"
                                 data-test="TreeNodeContainer:root/child2LoadingLabel"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="-1"
                               >
                                 <div
@@ -1228,11 +1187,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     data-test="TreeNodeContainer:root/child3ExpandingLabel"
                     itemType="leaf"
                     onOpenChange={[Function]}
-                    style={
-                      Object {
-                        "height": "100%",
-                      }
-                    }
                     value="root/child3ExpandingLabel"
                   >
                     <div
@@ -1245,11 +1199,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       onClick={[Function]}
                       onKeyDown={[Function]}
                       role="treeitem"
-                      style={
-                        Object {
-                          "height": "100%",
-                        }
-                      }
                       tabIndex={-1}
                     >
                       <ContextSelector.Provider
@@ -1349,7 +1298,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 data-fui-tree-item-value="root/child3ExpandingLabel"
                                 data-test="TreeNodeContainer:root/child3ExpandingLabel"
                                 role="treeitem"
-                                style="height: 100%;"
                                 tabindex="-1"
                               >
                                 <div
@@ -1474,11 +1422,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1513,11 +1456,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1557,11 +1495,6 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1604,11 +1537,6 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
       data-test="TreeNodeContainer:root"
       itemType="leaf"
       onOpenChange={[Function]}
-      style={
-        Object {
-          "height": "100%",
-        }
-      }
       value="root"
     >
       <TreeItemLayout
@@ -1698,11 +1626,6 @@ exports[`TreeNodeComponent renders a single node 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1737,11 +1660,6 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1776,11 +1694,6 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1865,11 +1778,6 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
   data-test="TreeNodeContainer:root"
   itemType="branch"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
@@ -1955,11 +1863,6 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
   data-test="TreeNodeContainer:root"
   itemType="leaf"
   onOpenChange={[Function]}
-  style={
-    Object {
-      "height": "100%",
-    }
-  }
   value="root"
 >
   <TreeItemLayout
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index ae4614ad9..afd0ef85b 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -166,7 +166,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
 
   return (
     <>
-      <FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
+      <FluentProvider theme={lightTheme} style={{ overflow: "auto" }}>
         <Tree
           aria-label="CosmosDB resources"
           openItems={openItems}