fix: Tooltips point in wrong direction#11935 (argoproj#12578)

* fix: Tooltips point in wrong direction#11935 Signed-off-by: Teng, Jessie <yilin.teng@fmr.com> * fix: Tooltips point in wrong direction#11935 Signed-off-by: Teng <yilin.teng@fmr.com> --------- Signed-off-by: Teng, Jessie <yilin.teng@fmr.com> Signed-off-by: Teng <yilin.teng@fmr.com> Co-authored-by: Teng, Jessie <a715260@fmr.com>
Marvin9 · Dec 1, 2023 · 8656585 · 8656585
1 parent 19fa5b9
commit 8656585
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/ui/src/app/sidebar/sidebar.scss b/ui/src/app/sidebar/sidebar.scss
@@ -58,6 +58,13 @@ $deselected-text: #818d94;
         text-overflow: ellipsis;
     }
 
+    &__tooltip {
+        max-width: 300px;
+        @media screen and (max-width: 590px) {
+            max-width: 250px;
+        }
+    }
+
     &__nav-item {
         cursor: pointer;
         display: flex;

diff --git a/ui/src/app/sidebar/sidebar.tsx b/ui/src/app/sidebar/sidebar.tsx
@@ -64,7 +64,7 @@ export const Sidebar = (props: SidebarProps) => {
                 </div>
 
                 {(props.navItems || []).map(item => (
-                    <Tooltip key={item.path} content={item?.tooltip || item.title} {...tooltipProps}>
+                    <Tooltip key={item.path} content={<div className='sidebar__tooltip'>{item?.tooltip || item.title}</div>} {...tooltipProps}>
                         <div
                             key={item.title}
                             className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}