Tracing: Span detail drawer: UX improvement (GA, P1)
Problem to Solve
On the tracing detail page, if a span title is long and wraps onto more than 1 line, it causes a horizontal scroll within the drawer, pushing the x
(close) button out of sight.
Solution
From @pgascouvaillancourt
:
This happens because paths don’t have breakable characters. We need to force the browser to wrap the string which can be done with overflow-wrap: anywhere. We have the
.gl-overflow-anywhere
CSS util for that. Given that the drawer’s title is only a slot, I don’t think there’s anything we need to change in GitLab UI, the fix can be done ad-hoc on the consumer’s end.
Additional UX notes:
-
- “X” needs more padding and shouldn’t be hidden behind horizontal scroll
-
- “X” should stay top aligned, not center aligned with multi-line title