fix(ui): show full labels, projects, clusters, and namespaces on hover in sidebar (#7520) (#24723)

Signed-off-by: Aditya Raj <[email protected]>
Signed-off-by: Aditya Raj <[email protected]>
Co-authored-by: jwinters01 <[email protected]>

ui/src/app/applications/components/filter/filter.scss

@@ -109,6 +109,16 @@ $slate: #191826;
             font-weight: 500;
         }
     }
+
+    &__tooltip {
+        max-width: 300px;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        white-space: normal;
+        @media screen and (max-width: 590px) {
+            max-width: 250px;
+        }
+    }
 }
 
 .filters-group {

ui/src/app/applications/components/filter/filter.tsx

@@ -1,4 +1,5 @@
 import {Autocomplete, Checkbox} from 'argo-ui/v2';
+import {Tooltip} from 'argo-ui';
 import * as React from 'react';
 
 import './filter.scss';
@@ -31,6 +32,17 @@ export const CheckboxRow = (props: {value: boolean; onChange?: (value: boolean)
         setValue(props.value);
     }, [props.value]);
 
+    const tooltipProps: Partial<React.ComponentProps<typeof Tooltip>> = {
+        placement: 'top',
+        popperOptions: {
+            modifiers: {
+                preventOverflow: {
+                    boundariesElement: 'window'
+                }
+            }
+        }
+    };
+
     return (
         <div className={`filter__item ${value ? 'filter__item--selected' : ''}`} onClick={() => setValue(!value)}>
             <Checkbox
@@ -46,7 +58,9 @@ export const CheckboxRow = (props: {value: boolean; onChange?: (value: boolean)
                 }}
             />
             {props.option.icon && <div style={{marginRight: '5px'}}>{props.option.icon}</div>}
-            <div className='filter__item__label'>{props.option.label}</div>
+            <Tooltip content={<div className='filter__tooltip'>{props.option.label}</div>} {...tooltipProps}>
+                <div className='filter__item__label'>{props.option.label}</div>
+            </Tooltip>
             <div style={{marginLeft: 'auto'}}>{props.option.count}</div>
         </div>
     );