Improve mobile layout of (Vue) Todos page
What does this MR do and why?
Improve mobile layout of (Vue) Todos page
- Ensure done/redo button stays square
- Make sure done/redo button stays horizontally aligned to the right even when wrapped to a second line by a long todo title
- Make sure tabs and top level action buttons wrap nicely
- Fix distortion of sort and filter dropdowns
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
Screenshots or screen recordings
| Viewport size | Before | After |
|---|---|---|
xs (<576px) |
 |
 |
xs (<576px) (when done/redo button wraps to second line) |
 |
 |
sm and up (>=576px) (no change) |
 |
 |
How to set up and validate locally
- Check out this branch
- Ensure you are using the Vue todos feature flag in the GDK (
todos_vue_application) - Visit http://gdk.test:3000/dashboard/todos/vue
- Reduce the size of your viewport so that it is between 390px and 500px wide
Edited by Chad Lavimoniere