Problem with current Tables guideline for fixed width columns on mobile screen sizes

[marteki]

Current guideline

Right now on our Tables page, there is the style option to use fixed width columns, with the following guideline given:

Column widths are automatically set by browsers by default. If needed, some or all columns can be set to specific widths instead to accommodate longer data or labels.

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

• Modify the Tables fixed width column guideline to state that fixed width columns expand to full width for mobile breakpoints, as done for columns whose width is automatically set by the browser.
• Modify Capital Framework to implement the updated guideline.

(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.)

[jimmynotjim]

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?

[Scotchester]

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?

[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

[caheberer]

👍 Makes sense to me.

[schaferjh]

👍 sounds good

[marteki]

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.

[marteki]

And with the merging of https://github.com/cfpb/design-manual/pull/485, I think this bug is fully resolved. Thanks all!