Project badge actions hidden if Badge Image is too wide
Summary
If the Badge Image URL
(and thus the resulting image typically) is too long when setting up Project badges, this causes the badge Actions (the icons to edit or remove a badge) to be hidden.
This is very closely related to the same behavior observed if the Badge URL is too long per - Project badge actions hidden if url is too long
Steps to reproduce
Replicated on GitLab.com SaaS 16.6.0-pre e4989ba4866
This can be replicated by creating a badge as follows, and viewing the resulting page in a browser at with a viewport width of 1920px
:
- Within a project, go to
Settings > General > Badges
- Select
Add Badge
- Set the
Name
as:test
- For sake of example, set the
Link
value as:https://img.shields.io/badge/long-8A2BE2
- Use a long URL for the
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
What is the current bug behavior?
The length of the badge images causes the badge actions to fall out of view, and the section cannot be scrolled horizontally.
What is the expected correct behavior?
It should still be possible to reach the badge actions in these cases without having to expand the browser's viewport or workaround it via other means.