Atlas UI: Relationship cards layout breaking, overlapping, and tooltip placement issues with long entity names (React & Classic UI)

[Brijesh619]

What changes were proposed in this pull request?

ATLAS-5376: Atlas UI: Relationship cards layout breaking, overlapping, and tooltip placement issues with long entity names (React & Classic UI)

This patch addresses several layout and rendering issues on the Entity Detail "Relationships" tab when dealing with extremely long relationship item names (e.g., massive queries or Kafka topic names without spaces). These issues were present in both the modern React UI and the classic UI.

React UI Changes:

• Tooltip Implementation: Wrapped the MUILink for relationship nodes in a <LightTooltip> component so that users can view the full name on hover.
• Max Width Adjustments: Reduced the max-width of the React UI relationship container to 350px to prevent overlap with the main graph canvas.
• Text Truncation: Inherited CSS ellipsis text-truncation from the .relationship-node-link class to ensure long names truncate cleanly with ... instead of stretching the container.

Classic UI Changes:

• Flexbox Blowout Fix: Added min-width: 0 to flex-column containers in relationship.scss to allow relationship items to shrink properly below their flex-basis content size.
• Text Truncation: Applied white-space: nowrap; overflow: hidden; text-overflow: ellipsis; to .entity-list-item and .relationship-card-link in graph.scss and relationship.scss.
• Tooltip Initialization:
  • Standardized .tooltip-inner in theme.scss with a max-width: 300px and word-break: break-all to ensure tooltip content wraps correctly rather than extending horizontally off-screen.
  • Dynamically initialized Bootstrap tooltips inside RelationshipLayoutView.js ($.fn.tooltip) using container: 'body' to ensure tooltips are not clipped by parent containers with overflow: hidden.

How was this patch tested?

• Manual Testing:
  • Created test entities with exceptionally long relationship names (over 300+ characters with no spaces).
  • Navigated to the "Relationships" tab in both the React UI and the Classic UI.
  • Verified that the relationship side-panel list now properly truncates the long names with ... and does not bleed out of its layout boundary or overlap the center graph.
  • Hovered over the truncated items and verified that the tooltips (MUI Tooltip in React; Bootstrap Tooltip in Classic) appear successfully.
  • Verified that the tooltip itself wraps the extremely long text onto multiple lines within a 300px box, staying visible on the screen.

[Brijesh619]