Merge branch 'users/sakshig/DarkTheme' of https://github.com/Azure/cosmos-explorer into users/sakshig/DarkTheme

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -10,6 +10,7 @@ const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
 export const useTreeStyles = makeStyles({
   treeContainer: {
     height: "100%",
+    maxHeight: "calc(100vh - 100px)", // Use viewport-relative height
     ...shorthands.overflow("auto"),
   },
   tree: {

src/Explorer/Sidebar.tsx

@@ -127,12 +127,6 @@ const useSidebarStyles = makeStyles({
       display: "flex",
     },
   },
-  treeContainer: {
-    flex: 1,
-    overflow: "auto",
-    backgroundColor: tokens.colorNeutralBackground1,
-    color: tokens.colorNeutralForeground1,
-  },
 });
 
 interface GlobalCommandsProps {
@@ -373,9 +367,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
                     </div>
                     <div className={styles.expandedContent} style={!hasGlobalCommands ? { gridTemplateRows: "1fr" } : undefined}>
                       {hasGlobalCommands && <GlobalCommands explorer={explorer} />}
-                      <div className={styles.treeContainer}>
-                        <ResourceTree explorer={explorer} />
-                      </div>
+                      <ResourceTree explorer={explorer} />
                     </div>
                   </>
                 ) : (