Icon explanation div width could be more responsive

[francisbarton]

Can we set the width of these sections to be a %age of the containing div? Or at least increase the max-width. The width is currently limited with a max-width, but they could flow a bit wider when page width allows.

(Currently the table elements within the spc-variation-icons, spc-assurance-icons and data-quality-icons divs are set to max-width: 500px;).

Potentially the icons could flow to side-by-side as well (are we using flexbox?)

[ThomUK]

Thanks, yes possible to do. I think this is a markdown thing, but should be possible to over-ride the css...

[ThomUK]

Implementation Plan

Update CSS to make the icon explanation tables responsive by overriding the global table { max-width: 500px; } rule for the specific icon explanation divs.

Approach:

• In inst/Rmd/css/style.css, add overriding CSS rules scoped to .spc-variation-icons table, .spc-assurance-icons table, and .data-quality-icons table to remove/increase the max-width (e.g. set to 100% of container)
• Optionally add flexbox/responsive layout if the existing markup supports it

Tests:

• Snapshot/visual tests are not present; verify the CSS selector is correctly scoped by reading the report Rmd template to confirm the div class names match