feat(breadcrumb): tooltip for organization logo

Qovery · Dec 27, 2022 · 3825c7f · 3825c7f
1 parent c4fc885
commit 3825c7f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/libs/shared/ui/src/lib/components/layouts/breadcrumb/breadcrumb.tsx b/libs/shared/ui/src/lib/components/layouts/breadcrumb/breadcrumb.tsx
@@ -25,6 +25,7 @@ import Icon from '../../icon/icon'
 import { IconAwesomeEnum } from '../../icon/icon-awesome.enum'
 import { MenuItemProps } from '../../menu/menu-item/menu-item'
 import StatusChip from '../../status-chip/status-chip'
+import Tooltip from '../../tooltip/tooltip'
 import BreadcrumbItem from '../breadcrumb-item/breadcrumb-item'
 
 export interface BreadcrumbProps {
@@ -170,17 +171,19 @@ export function BreadcrumbMemo(props: BreadcrumbProps) {
     <div className="flex justify-between w-full">
       <div className="flex h-full items-center">
         {organizationId && (
-          <div className="mr-2">
-            {currentOrganization?.logo_url ? (
-              <img
-                src={currentOrganization?.logo_url}
-                className="h-4"
-                alt={`${currentOrganization?.name} organization`}
-              />
-            ) : (
-              squareContent(currentOrganization?.name.charAt(0), '')
-            )}
-          </div>
+          <Tooltip content={currentOrganization?.name || ''}>
+            <div className="mr-2">
+              {currentOrganization?.logo_url ? (
+                <img
+                  src={currentOrganization?.logo_url}
+                  className="h-4"
+                  alt={`${currentOrganization?.name} organization`}
+                />
+              ) : (
+                squareContent(currentOrganization?.name.charAt(0), '')
+              )}
+            </div>
+          </Tooltip>
         )}
         {clusterId && (
           <BreadcrumbItem

diff --git a/libs/shared/ui/src/lib/components/menu/menu.tsx b/libs/shared/ui/src/lib/components/menu/menu.tsx
@@ -143,6 +143,7 @@ export function Menu(props: MenuProps) {
         onClose={(e) => handleClick(e)}
         anchorRef={ref}
         align={arrowAlign}
+        viewScroll="close"
         className="menu z-20"
         menuClassName={`rounded-md shadow-[0_0_32px_rgba(0,0,0,0.08)] p-0 ${className} menu__container menu__container--${direction} menu__container--${
           isOpen ? 'open' : 'closed'