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 |
|---|---|
|
|
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 statebadge,blocked/blockingindicators,assigneeavatars, andhealth statuson a new line below thetitle(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

