Make tag content more ergonomic on commit list pages

Chad Lavimoniererequested to merge
415877-the-latter-part-of-the-tag-is-missing-from-the-commits-list into master

What does this MR do and why?

Make tag content more ergonomic on commit list pages

  1. Change max width behavior for different breakpoints to expose as much as is reasonable for the available space
  2. Add a tooltip so that the full list of tags or the full long single tag name can be accessed.

Screenshots or screen recordings

📸 Images

Hovering:

Before After
image image
image image
Size Before After
xs (<576px) gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__5 gdk.test_3000_flightjs_Flight_-_commits_master_ref_type_heads
sm (>=576px) gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__6 gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__1
md (>=768px) gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__7 gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__2
lg (>=992px) gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__8 gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__10
xl (>=1200px) gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__9 gdk.test_3000_flightjs_Flight_-commits_master_ref_type_heads__4

📹 Video

Before After
Screen_Recording_2024-09-26_at_13.22.39 Screen_Recording_2024-09-26_at_13.23.46

How to set up and validate locally

The easiest way to test this is by creating a release and giving it a really long tag name.

  1. Check out this branch
  2. In the GDK, visit a project and go to Deploy > Releases
  3. Create a new release, and in the tag selector, write a really long tag name and create a new tag
  4. After creating the release, go to the project's Commits page. The commit at the top of the page will have the really long tag applied to it.
  5. You should see that the tag has a tooltip on hover or focus that shows the full tag name
  6. You should see that resizing your viewport makes the max width of the tag change.

Related to #415877 (closed), #474921 (closed)

Edited by Chad Lavimoniere

Merge request reports