Resizing/reflow of work item layout for different screen sizes
Proposal
As a result of contextual views, responsiveness must be based on work item container width:
- When the work item container is above MD breakpoint (768+px), show the sidebar.
- At XS or SM (0-767px), show sidebar attributes and apps below the description and above page apps (designs, child items).
Individual widgets are responsible for their own responsive behavior.
Why?
- Moving the sidebar attributes below the description will ensure they are visible without fully scrolling (in many cases, some will be visible without scrolling at all^); considering use cases like the board, where users today can only update attributes, this will ensure users can update items without scrolling and waiting on discussions etc to load.
- Known issue: This may change the DOM order for the sidebar (i.e. is not truly responsive). This is acceptable to ensure information priority is optimized.
- ^ Truncation of the description will be particularly valuable when the sidebar reflows to keep a consistent height and allow attributes to be visible.
Risks/considerations
At the large end of the SM breakpoint the sidebar is reflowed, but remains relatively wide, which puts the "Edit" button far from the corresponding label. At smaller SM/XS sizes this layout is the same, but as the column is more narrow this gap is not problematic.
We explored a few alternatives, such as restricting the width of the of attributes container or breaking attributes into two columns. The two column approach worked well but for only a very limited breakpoint, and may not work well in all work item configurations as it's dependent on what widgets are present. This proposal keeps this as a single full-width column at SM breakpoint, but this is worth keeping an eye on.