Fix: Stacking tables on small screens

[mistergone]

This PR adds a small fix for stacking tables on small screens. Byspecifying width: 100%, we override a fixed width for the column, forcing the columns to use the full width available when stacked.

Additions

• LESS in the .o-table__stack-on-small that adds width: 100% to th, td

Review

• @Scotchester or perhaps @jimmynotjim ?

Screenshots

Before

(Second and third columns are width: 20%)

After

(Second and third columns are width: 20%)

Notes

• I have a slight concern that this rule might not be specific enough to override other CSS rules. However, it's internally consistent in capital-framework. That is, if you put a class like u-w25pct on a cell, it will be overridden by this rule on small screens.

Checklist

• Changes are limited to a single goal (no scope creep)
• Code can be automatically merged (no conflicts)
• Code follows the standards laid out in the front end playbook
• Passes all existing automated tests
• New functions include new tests
• New functions are documented (with a description, list of inputs, and expected output)
• Placeholder code is flagged
• Visually tested in supported browsers and devices
• Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[jimmynotjim]

Thanks for getting this fixed, looks good. Before we merge it could you add a a patched changelog entry? It'll look like

**cf-tables:** [PATCH] Description

[mistergone]

CHANGELOG updated!

[Scotchester]

Looks good; thanks!