From f69815688ad0ea79b17b0181d2fe6015c61e6cca Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisa.knox@curii.com>
Date: Thu, 5 Sep 2024 14:43:02 -0400
Subject: [PATCH] 21720: fixed icon occlusion in sidepanel

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---
 services/workbench2/src/components/tree/tree.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/services/workbench2/src/components/tree/tree.tsx b/services/workbench2/src/components/tree/tree.tsx
index 1f1ce9467b..9d5be20f82 100644
--- a/services/workbench2/src/components/tree/tree.tsx
+++ b/services/workbench2/src/components/tree/tree.tsx
@@ -21,6 +21,8 @@ import { kebabCase } from 'lodash';
 
 type CssRules = 'list'
     | 'listItem'
+    | 'childLi'
+    | 'childItemName'
     | 'active'
     | 'loader'
     | 'toggableIconContainer'
@@ -57,6 +59,7 @@ const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         minWidth: '14px',
     },
     renderContainer: {
+        overflow: 'hidden',
         flex: 1
     },
     iconClose: {
@@ -83,6 +86,13 @@ const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
             backgroundColor: 'rgba(0, 0, 0, 0.08)',
         }
     },
+    childLi: {
+        display: 'flex', 
+        alignItems: 'center',
+    },
+    childItemName: {
+        fontSize: '0.875rem', 
+    },
     childItemIcon: {
         marginLeft: '8px',
         marginRight: '16px',
@@ -279,9 +289,9 @@ const FlatTree = (props: FlatTreeProps) =>
                             className={props.classes.checkbox}
                             color="primary" />}
                     <div data-action={FLAT_TREE_ACTIONS.toggleActive} className={props.classes.renderContainer} ref={item.active ? props.selectedRef : undefined}>
-                        <span style={{ display: 'flex', alignItems: 'center' }}>
+                        <span className={props.classes.childLi}>
                             <ItemIcon type={item.data.type} active={item.active} kind={item.data.kind} headKind={item.data.headKind || null} groupClass={item.data.kind === ResourceKind.GROUP ? item.data.groupClass : ''} classes={props.classes} />
-                            <span style={{ fontSize: '0.875rem' }}>
+                            <span className={props.classes.childItemName}>
                                 {item.data.name}
                             </span>
                             {
-- 
2.39.5