[go: up one dir, main page]

Improve the responsive behavior of the Child & Linked work item widgets on smaller viewports

Summary

The design and layout for the Child & Linked widgets could be improved for smaller viewport sizes.

Child widget Linked widget
Screenshot_2024-02-29_at_11.43.26_AM Screenshot_2024-02-29_at_11.48.22_AM

Proposal

Use container queries to modify the layout based on the container size of these widgets. See designs below and Figma file for details.

Below SM (576px) size, update the individual item layout per the following:

  • Show the state badge, blocked/blocking indicators, assignee avatars, and health status on a new line below the title (left aligned).
    • This requires moving some things around for this viewport size, so another design option is available in Figma if this is too involved for an initial iteration.

For the widget header:

  • Wrap the rollups (weight, progress, health status) in a container, and set this to wrap to a new line when space doesn't permit it being inline with action buttons in header (see designs).

Design resources

Edited by Nick Brandt