Follow-up to Address timeline bugs in small viewports
Desired outcome
As discussed below, we prefer the buttons in timeline event form to occupy full width on mobile (consistent with our general approach to buttons). I'm leaving the original description below for context:
Context
During reviewing the fix for the issue with timeline event form on mobile, I discovered that the buttons didn't wrap on smaller screens. The fix makes them so. I also had an additional idea how to improve that a bit. Namely, to shorten how much space buttons take on the smallest screens by fitting the short ones on one line and forcing the longer button to take on the next row. Here's the comparison (two possible mobie viewport size to better illustrate the issue)
current state | possible improvement |
---|---|
![]() |
![]() |
![]() |
![]() |
Concerns
UX: I see a value for the smallest screens in having all buttons on a smaller space, but is it enough to manipulate their order? Would that still be along any Pajamas guidelines?
Fronted: I originally thought about using container queries for this, as our smallest breakpoint is still to big and the changes would kick in earlier than needed. As pointed out to me, we do have a browser support matrix and at this moment container queries aren't supported wide enough to use them. Unless applied as a progressive enhancement and there's guarantee the won't cause any regression on older browsers.
Here's a patch with the container query option: timeline-buttons-container-quieries.patch
The second possible solution is reorganising the buttons to use floats: https://jsfiddle.net/kx30h5eo/