Skip to content

Fix Board Issue avatar styling

What does this MR do and why?

When exactly 2 assignees are on an issue in a board and the issue has a long enough due date, group/project name, weight and health status, then a situation can occur where the leading avatar(s) in the assignees group overlap the health status.

This also fixes some aspects of the avatar group to visually match the avatars-inline component from Pajamas:

  • ordering of avatars (rightmost on top instead of leftmost on top)
  • styling of "+..." counter (gray 100 bg, gray 900 text)

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-12-07_at_09.47.33 Screenshot_2023-12-07_at_09.49.04

How to set up and validate locally

  1. Check out this branch locally
  2. Go to a group issues board in your GDK (because the project name on all issues will show there)
  3. Find an issue that is not closed and make sure it has
    1. A weight
    2. A due date
    3. Health status Needs attention
    4. exactly 2 assignees
  4. You should see that the issue due date, weight, and health status is on one row, with the issue project name, id and avatars on the last row beneath them (note: you may need to refresh the browser before seeing the updated issue data reflected in the card on the board)
  5. remove one assignee from the issue
  6. You will see that now the due date, weight, health status, project name/id and avatars all appear on one line (Note: you may need to refresh the browser to see updated issue info after changing the assignees)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Chad Lavimoniere

Merge request reports