polish truncation CSS approach for pipeline dropdowns
What is this for?
This is a follow-on issue to gitlab-ce!26172. That issue fixed the bug in regards to truncation but at the last moment a broader question about approach came up. This issue is a space to resolve that.
The Question
Given a component that is reused in a number of situations — in this case, the job-name-component
, can we find a reusable CSS approach that does not involve adding a single-use CSS class, especially given that we currently have a working group dedicated to reining in the CSS? Is this desirable?
Current Thought
I believe we should be able to create reusable max-width
classes and apply them programmatically in the templates based on whether there is an action or count icon to take into account. (The JS is already tracking this anyways.)
This should take care of any responsiveness issues and get us into a reasonably good spot. I would think we want round classes — max-width: 70%
, max-width: 80%
, which means there may still be a little space on the ends. That seems reasonable to me, but that's open to discussion.