Skip to content

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.

drawer_bug

image

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