Scale episode list rows horizontally
When making the window narrower than the episode row width, the rows don't scale with the window, and it starts to scroll horizontally. This is of course not great, the row elements should adapt such that all elements are always visible, and there is no horizontal overflow.
Steps to reproduce:
- Open Hammond
- Resize to about 500px
- The list rows are wider than the viewport, it scrolls horizontally
There are two options for how we could handle this:
- Having the list rows have a fixed width until the window is too wide for them, at which point they are always 100% minus the margins on both sides.
- Having the row items be a percentage of the total width. We'd probably need to have different percentages for larger and smaller widths for it to work well (e.g. like media queries on responsive websites).
Design Tasks
-
define new responsive behavior
Development Tasks
-
make list rows always fit the viewport -
add 12px margins left and right of the column at narrow sizes
QA Tasks
-
list rows scale horizontally at narrow sizes -
margins are correct -
no horizontal scrolling
Edited by Jordan Petridis