Fix: Channel name truncation visibility #3166

[Rahulchaudharyji2]

Description

This PR addresses issue #3166 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 #3166

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 and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6298e8c and df57845.

📒 Files selected for processing (1)

• src/injected.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Follow existing TypeScript patterns with strict mode enabled
All new code must pass ESLint and TypeScript checks
Avoid unnecessary comments; only add comments for complex logic or non-obvious decisions

Files:

• src/injected.ts

🔇 Additional comments (2)

src/injected.ts (2)

395-395: LGTM!

The flag addition follows the established pattern for preventing duplicate feature initialization.

---

598-615: Verify selector specificity – note that the proposed fix does not address the over-matching concern.

The className.includes('title') filter uses substring matching and could match unintended elements like "subtitle", "titleBar", and "entitle". This is a valid concern that should be verified against actual sidebar and chat message selectors.

However, the proposed diff perpetuates this problem. Using Array.from(target.classList).some(cls => cls.includes('title')) still performs substring matching on each class token – it will still match "titleBar" and "subtitle". To actually prevent over-matching, you need exact token matching:

• Use classList.contains('title') for exact match, or
• Use a more specific class like classList.contains('channel-title') or classList.contains('sidebar-title')

While switching to classList is a reasonable improvement for robustness across HTML and SVG elements, the current diff suggestion does not resolve the stated over-matching issue. Verify the actual class names used for sidebar items and chat messages, then apply the correct selector.

---

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