Merge branch 'master' into data-visualization-sarah

1 files changed, 21 insertions, 7 deletions

diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 85f99b9c2..d22e85880 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -13,7 +13,7 @@
 .treeView-container-active {
     .bullet-outline {
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         color: $medium-gray;
         transform: scale(0.5);
         display: inline-flex;
@@ -21,7 +21,6 @@
     }
 
     .treeView-bulletIcons {
-        // width: $TREE_BULLET_WIDTH;
         width: 100%;
         height: 100%;
         position: relative;
@@ -43,11 +42,12 @@
         justify-content: center;
         align-items: center;
         position: relative;
-        width: $TREE_BULLET_WIDTH;
+        width: fit-content;
         min-height: 20px;
         color: $medium-gray;
         border: #80808030 1px solid;
         border-radius: 5px;
+        z-index: 1;
     }
 }
 
@@ -55,9 +55,6 @@
     position: absolute;
     height: max-content;
     pointer-events: none;
-    color: white;
-    border-radius: 4px;
-    font-size: 10px;
 }
 
 .treeView-container-active {
@@ -105,10 +102,26 @@
     align-items: center;
     width: max-content;
     border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    .treeView-background {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        filter: opacity(0);
+    }
 
     &:hover {
-        background-color: #bdddf5;
+        .treeView-background {
+            filter: opacity(0.2) !important;
+        }
     }
+    
 
     //align-items: center;
     ::-webkit-scrollbar {
@@ -141,6 +154,7 @@
         opacity: 0.75;
         pointer-events: all;
         cursor: pointer;
+        z-index: 1;
 
         > svg {
             margin-left: 0.25rem;