Fix/truncated button change size on hover 794

[prakha]

Issue

• resolve: Make it easier to display tooltips for table names #764

Why is this change needed?

What would you like reviewers to focus on?

Testing Verification

What was done

🤖 Generated by PR Agent at eb58504

• Implemented text truncation detection for table names.
  • Added ResizeObserver for dynamic truncation checks.
  • Tooltip visibility now depends on truncation state.
• Updated SidebarMenuButton to support conditional tooltips.
  • Introduced showtooltip prop for tooltip control.
  • Adjusted tooltip alignment and visibility logic.
• Improved styling for table name container.
  • Ensured proper truncation and responsive design.

Detailed Changes

Relevant files

Enhancement

TableNameMenuButton.tsx Implement text truncation detection and tooltip control    frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx Added logic to detect text truncation using ResizeObserver. Updated tooltip behavior to show only when text is truncated. Refactored event listeners for resize and DOM changes. Simplified tooltip integration with SidebarMenuButton. +74/-73  Sidebar.tsx Add conditional tooltip support to SidebarMenuButton          frontend/packages/ui/src/components/Sidebar/Sidebar.tsx Added showtooltip prop to control tooltip visibility. Adjusted tooltip alignment and visibility logic. Refactored tooltip integration for SidebarMenuButton. +6/-5      TableNameMenuButton.module.css Improve styling for table name truncation                                frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.module.css Updated .tableName styles for proper truncation. Enhanced .button styles for responsive design. Added flex properties for alignment and spacing. +10/-0

Additional Notes

---

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]

⚠️ No Changeset found

Latest commit: 63386bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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		Mar 10, 2025 0:26am

3 Skipped Deployments

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

[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 Event Handler The onClick and onKeyDown handlers are set to the same function, which may not handle keyboard events correctly. The onKeyDown handler should check for specific keys like Enter or Space. onClick={handleClickMenuButton(name)} onKeyDown={handleClickMenuButton(name)} ResizeObserver Performance The ResizeObserver is created on every render. Consider memoizing it with useRef or useMemo to avoid unnecessary recreations. const observer = new ResizeObserver(checkTruncation)

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

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix keyboard accessibility issue The onKeyDown handler is incorrectly implemented. It's directly calling the function instead of passing a callback that checks for specific key presses (like Enter or Space). This will trigger the action regardless of which key is pressed. frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx [80-87] <div // biome-ignore lint/a11y/useSemanticElements: Implemented with div button to be button in button role="button" tabIndex={0} onClick={handleClickMenuButton(name)} - onKeyDown={handleClickMenuButton(name)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleClickMenuButton(name)(e); + } + }} aria-label={`Menu button for ${name}`} > Apply this suggestion Suggestion importance[1-10]: 9 __ Why: This suggestion addresses a critical accessibility issue. The current implementation triggers the action on any key press, which is incorrect behavior for keyboard navigation. The improved code properly handles only Enter and Space key presses, which is the standard for accessible button interactions.	High
	Fix incorrect parameter usage The handleClickMenuButton function is called with name but expects a tableId. If name is not the correct table ID, this could cause incorrect behavior. Consider using the appropriate table ID property from the node data. frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/TableNameMenuButton/TableNameMenuButton.tsx [53-67] const handleClickMenuButton = (tableId: string) => () => { selectTable({ tableId, displayArea: "main", }); selectTableLogEvent({ ref: "leftPane", tableId, platform: version.displayedOn, gitHash: version.gitHash, ver: version.version, appEnv: version.envName, }); }; +// Use the appropriate table ID when calling the function +const tableId = node.data.table.id || name; + Apply this suggestion Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies a potential bug where the table name is being used as the tableId parameter. This could cause incorrect behavior if the table name is not the same as its ID, which is a common scenario in database systems.	Medium
Update

[MH4GF]

@prakha Could you please keep the button space open so that the truncate position does not change?

Screen.Recording.2025-03-07.at.9.46.22.mov

[MH4GF]

You are always cool!

[MH4GF]

Thanks for keeping up with the recent spec changes!

[MH4GF]

Cool refactoring 👏🏻

[prakha]

@prakha Could you please keep the button space open so that the truncate position does not change?

Screen.Recording.2025-03-07.at.9.46.22.mov

@MH4GF, i have added some space, plz review

[MH4GF]

Thanks! I will adjust some appearance.