Closed marteki closed 7 years ago
Nice catch on this. @mistergone did you want to take on making the code changes to Capital Framework since you're already familiar with the tables code?
Yep, this should definitely get fixed. Shouldn't be too hard. @jimmynotjim FWIW, @mistergone is out the rest of the week, but I don't think it's too urgent to wait for his return. @marteki?
Yep, this can definitely wait for his return. Wanted to check with the whole design/dev crew here, since it would also mean a change in the Design Manual copy to be more explicit about what happens at smaller sizes.
Does anyone else have concerns with this proposal moving forward, before we draft new content or make any code changes? @caheberer @schaferjh
👍 Makes sense to me.
👍 sounds good
Update: thanks to @mistergone, the fix for this has been merged into both Capital Framework and our Wagtail codebase.
We'll be submitting a pull request to clarify the Design Manual guideline next week.
And with the merging of https://github.com/cfpb/design-manual/pull/485, I think this bug is fully resolved. Thanks all!
Current guideline
Right now on our Tables page, there is the style option to use fixed width columns, with the following guideline given:
Examples are then shown with columns fixed to specific percentages of the table width:
Discovered issue
However, at small device widths, the current guideline (and front-end code implementation) has the columns stay fixed to a specific percentage, even though the table now has a smaller width.
The following examples are of desktop and mobile views of the same table. The first table column's width is automatically set by the browser, while the last two are set to 25% width each.
Desktop:
Mobile:
Recommendation
(Thanks to @ajbush @pjpdesigns @StephanieLevy for working on the design that nicely uses fixed width columns, and @mistergone for demoing the code that revealed the problem on smaller screens.)