Fix UI badges table overflow
What does this MR do and why?
Fixed issue where overly long names, links, or wide badge images caused the badges table in the project settings to become too wide in desktop mode, leading to edit and delete action buttons disappearing due to overflow and becoming unclickable.
- Changed table layout to
fixed
- Added
str-truncated
class to Name and URL - Added tooltip with full value
- Added
overflow-hidden
to the badge image
Related issues: #423248 (closed) #429340 (closed)
MR acceptance checklist
-
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- Go to Project Settings > General > Badges
- Add new Badge
- Enter following values
- Name:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- Link:
https://example.gitlab.com/very_very_very_very_very_very_very_very_very_very_very_very_very_very_very_very_long_link
- Badge image URL:
https://img.shields.io/badge/$test_badge-Test%20|%20SEO:%20xyz%20|%20Perf:%20yyz%20|%20Reticulating%20Splines%20|%20a%20la%20la%20la%20la%20long%20a%20la%20la%20la%20la%20long%20long%20li%20long%20long%20long%20a%20la%20la%20la%20la%20long%20a%20la%20la%20la%20la%20long%20long%20li%20long%20long%20long%20a%20la%20la%20la%20la%20long%20a%20la%20la%20la%20la%20long%20long%20li%20long%20long%20long%20a%20la%20la%20la%20la%20long%20a%20la%20la%20la%20la%20long%20long%20li%20long%20long%20long-8A2BE2
- Name:
Edited by Laura Callahan