Fix: Channel name truncation visibility #3166

[Rahulchaudharyji2]

Description

This PR addresses issue RocketChat/Rocket.Chat#38316 where long channel names in the sidebar are truncated without a way to view the full name.

It implements a solution using bash src/injected.ts to inject a bash mouseover event listener. This listener detects if an element with a class containing "title" (like sidebar items) is truncated bash (scrollWidth > clientWidth). If so, it adds a native browser bash title attribute, displaying the full text in a tooltip on hover.

Logic

• Event: Global bash mouseover on bash document.body (delegated).

- Condition:

1. Element is truncated.
2. Element text is present.
3. Element does not already have a bash title.
4. Element class name includes "title" (to target sidebar items and avoid chat messages).

• Action: Sets bash title attribute to bash innerText.

Tasks

• Verified tooltips appear for truncated sidebar items.

• Verified tooltips do NOT appear for long chat messages.

Issue
Closes RocketChat/Rocket.Chat#38316

Summary by CodeRabbit

• New Features
  • Hover tooltips now automatically display for elements with truncated text, allowing users to view complete content on hover.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

A new hover tooltip mechanism is added to src/injected.ts that automatically displays full text as a tooltip when users hover over truncated elements with overflow. The feature targets elements containing title in their className, containing text content, and lacking an existing title attribute. A setup flag prevents duplicate listener attachment.

Changes

Cohort / File(s)	Summary
Hover Tooltip Implementation src/injected.ts	Added hoverTooltips setup flag to track initialization state. Introduced global mouseover listener on document body that detects truncated elements (scrollWidth > clientWidth), checks for innerText content, absence of title attribute, and title in className, then assigns innerText to title attribute. Guard flag ensures listener attaches only once.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A hover, a whisper, and secrets unfold,
Long channel names finally told!
The rabbit's tooltip blooms on sight,
No more truncation in the night. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'Fix: Channel name truncation visibility #3166' clearly and specifically describes the main change: fixing the visibility of truncated channel names, directly addressing the linked issue.
Linked Issues check	✅ Passed	The code changes implement the core requirement from issue #3166: adding a hover tooltip mechanism that displays full channel names for truncated sidebar elements via a title attribute.
Out of Scope Changes check	✅ Passed	All changes in src/injected.ts are directly scoped to issue #3166: implementing hover tooltip functionality for truncated channel names with the specified conditions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Rahulchaudharyji2]

@zeke @turadg @ddompe Sir please review my code

[jeanfbrito]

This needs to be fixed on the core repo. I moved the issue there.