From b17e45f272a92a22efaf75717a35782b5f5fb99b Mon Sep 17 00:00:00 2001
From: Abhay <76918911+Abhay-86@users.noreply.github.com>
Date: Wed, 10 Dec 2025 20:38:44 +0530
Subject: [PATCH] Feat/wrap nav drawer with overflowing text with tooltip
 (#16455)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# **feat: Add tooltips for truncated names in navigation components**

### **Summary**

Adds hover tooltips across navigation components so users can view full
names when text is truncated due to limited space.

---

# **Changes Made**

### **Sidebar Navigation**

* Added tooltips to navigation drawer items and menu labels.
* Long workspace or company names now show full text on hover.

### **Top Bar**

* Added tooltip support to the View Picker dropdown header.
* Long view names (e.g., *“AuraML, very very long name”*) now reveal
their full value on hover.

---

# **Implementation**

* Integrated `OverflowingTextWithTooltip` from `twenty-ui/display`.
* Wrapped navigation and view labels with the component.
* Updated layout styles to allow accurate overflow detection.
* Tooltip appears **only** when truncation occurs; short names show no
tooltip.

---

# **User Experience**

Users can hover over any truncated workspace, company, navigation, or
view name to see the complete text—improving clarity, accessibility, and
overall navigation usability.


[https://github.com/user-attachments/assets/97f9ea6c-409c-4ec5-a27c-a7b1c5aa5682](https://github.com/user-attachments/assets/97f9ea6c-409c-4ec5-a27c-a7b1c5aa5682)

---

### **Fixes**

Closes **#16412**

---

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
---
 .../components/NavigationDrawerItem.tsx            |  5 ++++-
 .../view-picker/components/ViewPickerDropdown.tsx  | 14 +++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index 6e92b78ea1..5be114c798 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -17,6 +17,7 @@ import {
   AppTooltip,
   type IconComponent,
   Label,
+  OverflowingTextWithTooltip,
   type TablerIconsProps,
   TooltipDelay,
   TooltipPosition,
@@ -345,7 +346,9 @@ export const NavigationDrawerItem = ({
 
           <StyledLabelParent>
             <StyledEllipsisContainer>
-              <StyledItemLabel>{label}</StyledItemLabel>
+              <StyledItemLabel>
+                <OverflowingTextWithTooltip text={label} />
+              </StyledItemLabel>
               {secondaryLabel && (
                 <StyledItemSecondaryLabel>
                   {' · '}
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
index 8a81ca8729..87ec973dbf 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@@ -16,7 +16,12 @@ import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPicke
 import { useUpdateViewFromCurrentState } from '@/views/view-picker/hooks/useUpdateViewFromCurrentState';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconList, useIcons } from 'twenty-ui/display';
+import {
+  IconChevronDown,
+  IconList,
+  OverflowingTextWithTooltip,
+  useIcons,
+} from 'twenty-ui/display';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledDropdownLabelAdornments = styled.span`
@@ -37,10 +42,7 @@ const StyledViewName = styled.span`
   @media (min-width: 376px) and (max-width: ${MOBILE_VIEWPORT}px) {
     max-width: 110px;
   }
-  overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
-  white-space: nowrap;
 `;
 
 export const ViewPickerDropdown = () => {
@@ -82,7 +84,9 @@ export const ViewPickerDropdown = () => {
           ) : (
             <IconList size={theme.icon.size.md} />
           )}
-          <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
+          <StyledViewName>
+            <OverflowingTextWithTooltip text={currentView?.name ?? 'All'} />
+          </StyledViewName>
           <StyledDropdownLabelAdornments>
             {isDefined(totalCount) && <>· {totalCount} </>}
             <IconChevronDown size={theme.icon.size.sm} />