From 95167ec5dbb1bf664a2bb0c779a706c20fdf614a Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Fri, 20 Sep 2024 10:42:19 +0200
Subject: [PATCH] test

---
 .../explore/Debug/Tree/FileTreeItem.tsx       | 20 ++++++++++++++++---
 .../Singlestudy/explore/Debug/Tree/index.tsx  |  6 ------
 .../App/Singlestudy/explore/Debug/index.tsx   |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
index d72c1352f8..aaabe7d212 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
@@ -15,6 +15,7 @@ function FileTreeItem({ name, treeData, path }: Props) {
   const filePath = path ? `${path}/${name}` : name;
   const fileType = getFileType(treeData);
   const FileIcon = getFileIcon(fileType);
+  const canExpand = isFolder(treeData) && Object.keys(treeData).length > 0;
 
   ////////////////////////////////////////////////////////////////
   // Event handlers
@@ -23,6 +24,7 @@ function FileTreeItem({ name, treeData, path }: Props) {
   const handleClick: TreeItemProps["onClick"] = ({ target }) => {
     // The item is not selected if the click is on the expand/collapse icon
     if (
+      canExpand &&
       target instanceof Element &&
       target.closest(".MuiTreeItem-iconContainer")
     ) {
@@ -47,9 +49,21 @@ function FileTreeItem({ name, treeData, path }: Props) {
       }
       onClick={handleClick}
       sx={{
-        // Expand/collapse icon
-        ".MuiTreeItem-iconContainer:hover": {
-          backgroundColor: "rgb(0 0 0 / 50%)",
+        ".MuiTreeItem-content": {
+          p: 0,
+          alignItems: "normal",
+          // Expand/collapse icon
+          ".MuiTreeItem-iconContainer": {
+            alignItems: "center",
+            borderTopLeftRadius: "inherit",
+            borderBottomLeftRadius: "inherit",
+            "&:hover": {
+              background: canExpand ? "inherit" : "none",
+            },
+          },
+          ".MuiTreeItem-label": {
+            py: 0.5,
+          },
         },
       }}
     >
diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
index 06e94d00ad..6e53e09dbe 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/index.tsx
@@ -1,6 +1,4 @@
 import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import FileTreeItem from "./FileTreeItem";
 import { getParentPaths, type TreeFolder } from "../utils";
 
@@ -44,10 +42,6 @@ function Tree(props: Props) {
           : expandedItems
       }
       onExpandedItemsChange={handleExpandedItemsChange}
-      slots={{
-        expandIcon: ArrowRightIcon,
-        collapseIcon: ArrowDropDownIcon,
-      }}
     >
       {Object.keys(data).map((filename) => (
         <FileTreeItem
diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/index.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/index.tsx
index 24cec8b2a3..186cba1d95 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/index.tsx
@@ -93,7 +93,7 @@ function Debug() {
 
   return (
     <SplitView id="debug" sizes={[15, 85]}>
-      <Box sx={{ overflow: "auto" }}>
+      <Box sx={{ px: 1, overflow: "auto" }}>
         <UsePromiseCond
           response={res}
           ifResolved={(data) => (