fix: truncate table cell text if too long

[Junjiequan]

Description

Added CSS text truncation with text-overflow: ellipsis for table cells so long content is clipped and displayed with “…” at the end.

Motivation

long texts were cut off without indication

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Improve table cell text handling and header tooltips for dynamic material tables.

Bug Fixes:

• Ensure long table cell labels are truncated with ellipsis instead of overflowing or being cut off without indication.

Enhancements:

• Adjust label cell styling to use block layout with pointer cursor and full-width ellipsis truncation.
• Refine header cell tooltip behavior by positioning it above, anchoring it at the origin, and adding a slight show delay.
• Simplify cell tooltip styling by removing extra padding for a more compact appearance.

[sourcery-ai]

Hey - I've left some high level feedback:

• Changing .label-cell from display: flex to display: block may affect existing alignment/layout of cell contents; consider applying the truncation styles to an inner element while keeping the flex container if the original flex behavior is still needed elsewhere.
• Setting cursor: pointer on .label-cell will show a pointer even for non-interactive cells; consider keeping cursor: inherit or only applying pointer when the cell is actually clickable.
• The removal of padding from .cell-tooltip will tighten tooltip content; if this was unintentional, consider restoring a reduced but non-zero padding to maintain readability while still matching the new design.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Changing `.label-cell` from `display: flex` to `display: block` may affect existing alignment/layout of cell contents; consider applying the truncation styles to an inner element while keeping the flex container if the original flex behavior is still needed elsewhere.
- Setting `cursor: pointer` on `.label-cell` will show a pointer even for non-interactive cells; consider keeping `cursor: inherit` or only applying `pointer` when the cell is actually clickable.
- The removal of padding from `.cell-tooltip` will tighten tooltip content; if this was unintentional, consider restoring a reduced but non-zero padding to maintain readability while still matching the new design.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}