fix(sidebar): Show full channel name on hover (#38316)

Author: tushargr0ver

.changeset/short-names-visible.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fix: Long channel names are truncated and not visible on hover

apps/meteor/client/sidebar/Item/Condensed.tsx

@@ -27,7 +27,9 @@ const Condensed = ({ icon, title, avatar, actions, unread, menu, badges, ...prop
 		<SidebarV2Item {...props} onFocus={handleFocus} onPointerEnter={handlePointerEnter}>
 			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
 			{icon}
-			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			<SidebarV2ItemTitle unread={unread} title={typeof title === 'string' ? title : undefined}>
+				{title}
+			</SidebarV2ItemTitle>
 			{badges}
 			{actions}
 			{menu && (

apps/meteor/client/sidebar/Item/Extended.tsx

@@ -60,7 +60,9 @@ const Extended = ({
 			<SidebarV2ItemCol>
 				<SidebarV2ItemRow>
 					{icon}
-					<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+					<SidebarV2ItemTitle unread={unread} title={typeof title === 'string' ? title : undefined}>
+						{title}
+					</SidebarV2ItemTitle>
 					{time && <SidebarV2ItemTimestamp>{formatDate(time)}</SidebarV2ItemTimestamp>}
 				</SidebarV2ItemRow>
 				<SidebarV2ItemRow>

apps/meteor/client/sidebar/Item/Medium.tsx

@@ -26,7 +26,9 @@ const Medium = ({ icon, title, avatar, actions, badges, unread, menu, ...props }
 		<SidebarV2Item {...props} onFocus={handleFocus} onPointerEnter={handlePointerEnter}>
 			<SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>
 			{icon}
-			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>
+			<SidebarV2ItemTitle unread={unread} title={typeof title === 'string' ? title : undefined}>
+				{title}
+			</SidebarV2ItemTitle>
 			{badges}
 			{actions}
 			{menu && (

apps/meteor/tests/e2e/sidebar.spec.ts

@@ -102,6 +102,11 @@ test.describe.serial('Sidebar', () => {
 			expect(isExpanded).toBeTruthy();
 		});
 
+		test('should display full channel name on hover via tooltip', async () => {
+			const item = poHomeChannel.sidebar.getSidebarItemByName(targetChannel);
+			await expect(item.locator(`[title="${targetChannel}"]`)).toBeAttached();
+		});
+
 		test('should expand/collapse sidebar groups with keyboard', async ({ page }) => {
 			await page.goto('/home');