Skip to content

Fix panel query for work item attributes wrapper

What does this MR do and why?

The work item attributes wrapper should query its closest parent container, not the panel itself. This aligns it with the container queries used for other work item content and avoids an awkward transitional width where the panel and the work item container are in different breakpoints.

References

Screenshots or screen recordings

Before After
gdk.test_3000_flightjs_Flight_-_issues_show=eyJpaWQiOiI0MyIsImZ1bGxfcGF0aCI6ImZsaWdodGpzL0ZsaWdodCIsImlkIjo2MjV9 (10).png gdk.test_3000_flightjs_Flight_-_issues_show=eyJpaWQiOiI0MyIsImZ1bGxfcGF0aCI6ImZsaWdodGpzL0ZsaWdodCIsImlkIjo2MjV9 (9).png

How to set up and validate locally

  1. Check out this branch
  2. In the GDK, open a work item
  3. Resize your viewport so that the panel containing the work item is >=768px wide, but the work item container (the div with class .work-item-view is <768px wide. Also make sure your viewport is reasonably low height, as the viewport height impacts the ease of reproduction
  4. You will see that the work item attributes (most notably the participants as that is the last part of it) does not overlap the next section in the work item
  5. Scale your viewport wider and narrower to see that this container query now triggers at the same breakpoint as the other work item elements

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Paul Gascou-Vaillancourt

Merge request reports

Loading