Skip to content

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
Screenshot 2024-01-04 204006.png Screenshot 2024-01-04 204128.png
Screenshot 2024-01-04 204026.png Screenshot 2024-01-04 204117.png

How to set up and validate locally

  1. Go to Project Settings > General > Badges
  2. Add new Badge
  3. Enter following values
    1. 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.
    2. Link: https://example.gitlab.com/very_very_very_very_very_very_very_very_very_very_very_very_very_very_very_very_long_link
    3. 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
Edited by Laura Callahan

Merge request reports