diff --git a/src/Explorer/Controls/TreeComponent/Styles.ts b/src/Explorer/Controls/TreeComponent/Styles.ts index a81923f35..dbea68f85 100644 --- a/src/Explorer/Controls/TreeComponent/Styles.ts +++ b/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: { diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx index 27aabe683..31c376cb3 100644 --- a/src/Explorer/Sidebar.tsx +++ b/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 = ({ explorer }) => {
{hasGlobalCommands && } -
- -
+
) : (