feat(table-menu): add tooltip for truncated table names

[prakha]

User description

Related Issue

• resolves: Show table full name on Sidebar #765

Testing

Other Information

---

PR Type

Enhancement

---

Description

• Added tooltip functionality for truncated table names.

• Introduced state and effect to detect truncation.

• Updated UI components to integrate tooltip elements.

• Added a changeset entry for the new feature.

---

Changes walkthrough 📝

	Relevant files
Enhancement	TableNameMenuButton.tsx Add tooltip and truncation detection for table names          frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx Added tooltip functionality for truncated table names. Used TooltipProvider, TooltipTrigger, and related components. Implemented truncation detection using useRef and useState. Updated button structure to support tooltips. +57/-22
Documentation	afraid-forks-report.md Document tooltip feature in changeset                                        .changeset/afraid-forks-report.md Added a changeset entry describing the tooltip feature. +5/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

🦋 Changeset detected

Latest commit: 29aff82

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@liam-hq/erd-core	Minor
@liam-hq/cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
liam-erd-sample	✅ Ready (Inspect)	Visit Preview		Feb 28, 2025 0:32am

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
test-liam-docs	⬜️ Ignored (Inspect)			Feb 28, 2025 0:32am
test-liam-erd-sample	⬜️ Ignored (Inspect)			Feb 28, 2025 0:32am
test-liam-erd-web	⬜️ Ignored (Inspect)			Feb 28, 2025 0:32am

[vercel]

@prakha is attempting to deploy a commit to the ROUTE06 Core Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance The truncation check effect runs only once and doesn't update if the table name changes dynamically. Consider adding name dependency to useEffect. useEffect(() => { if (textRef.current) { setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth) } }, []) Accessibility The tooltip implementation should consider keyboard navigation and focus management for better accessibility. Consider adding aria-expanded and aria-describedby attributes. {isTruncated ? ( <TooltipTrigger asChild> <span ref={textRef} className={styles.tableName}> {name} </span> </TooltipTrigger> ) : ( <span ref={textRef} className={styles.tableName}> {name} </span> )}

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Handle dynamic size changes Add a resize observer to dynamically update truncation state when the component size changes, as the current implementation only checks once on mount. frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx [29-33] useEffect(() => { - if (textRef.current) { - setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth) - } + const element = textRef.current; + if (!element) return; + + const resizeObserver = new ResizeObserver(() => { + setIsTruncated(element.scrollWidth > element.clientWidth); + }); + + resizeObserver.observe(element); + return () => resizeObserver.disconnect(); }, []) Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The suggestion significantly improves functionality by adding dynamic truncation detection using ResizeObserver, addressing a limitation in the current implementation which only checks once on mount.	Medium
	Improve keyboard accessibility Add keyboard accessibility for the tooltip by handling focus events, ensuring the tooltip is accessible to keyboard users. frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx [74-84] {isTruncated ? ( <TooltipTrigger asChild> - <span ref={textRef} className={styles.tableName}> + <span + ref={textRef} + className={styles.tableName} + tabIndex={0} + role="button" + onFocus={(e) => e.currentTarget.click()} + > {name} </span> </TooltipTrigger> ) : ( <span ref={textRef} className={styles.tableName}> {name} </span> )} Apply this suggestion Suggestion importance[1-10]: 3 __ Why: While the suggestion aims to improve accessibility, it's redundant as the parent div already has proper keyboard handling with tabIndex and role="button". Adding another focusable element could create confusion in the tab order.	Low
More

[MH4GF]

@prakha cc @sasamuku Looks like the same as #783, but I'll merge #792 .

[MH4GF]

LGTM 👍🏻 Cool!!