Now that most of the pages use a table-based layout for listing out reports, we need to be able to make them usable on smaller screens. There are a few options:
We remove columns that we don't think are important (i.e. the various Counts). That would help a bit, but wouldn't totally solve the issue (but would be the easiest solution)
We add a container around all of the tables to make them horizontally scrollable. That's a fairly straightforward solution, especially since the tables themselves have a maximum number of rows, but it's still not the most usable since the horizontal scrolling isn't particularly obvious
We convert the table to a list of some sort once it hits a particular breakpoint. That can be only almost exclusively in CSS (so long as there are data-attributes that provide the column headings in the table) and is the most extensible option.
My vote is for 3, even though it's a bit trickier to get it right; that said, if we can get it done properly here, then there's a good payoff for the rest of the projects.
Now that most of the pages use a table-based layout for listing out reports, we need to be able to make them usable on smaller screens. There are a few options:
My vote is for 3, even though it's a bit trickier to get it right; that said, if we can get it done properly here, then there's a good payoff for the rest of the projects.