diff --git a/CHANGELOG.md b/CHANGELOG.md index fbc0971665..31d75a913a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,6 +68,16 @@ global styles are enabled ([PR #877}])https://github.com/alphagov/govuk-frontend/pull/877 +- Define size of table in `px` rather than `em` + + This brings the styling of tables inline with rest of GOV.UK Frontend which no longer uses `em` for measurements. + + This change very slightly increases the padding of table cells on mobile viewport as the use of `em` meant the font size set in the table was used to calculate padding. `padding-top` and `padding-bottom` of cells increase by 1.5px respectively which very slightly increases the height of the table on mobile. + + In the unlikely case that your UI has a dependency on tables being a certain fixed height of mobile viewport, this change might affect you. + + ([PR #845](https://github.com/alphagov/govuk-frontend/pull/845)) + 🏠 Internal: - Fix Design System url in package READMEs and review app diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index acfa89db07..e329a254bf 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -16,13 +16,13 @@ .govuk-table__header { @include govuk-typography-weight-bold; - padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0; + padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; border-bottom: 1px solid $govuk-border-colour; text-align: left; } .govuk-table__cell { - padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0; + padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; border-bottom: 1px solid $govuk-border-colour; text-align: left; }