search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Incorrect content width on summary list rows when not all rows have actions #2495

Closed fofr closed 2 years ago

fofr commented 2 years ago

Description of the issue

When using the summary-list nunjucks macro, when some rows have actions and some do not, the width given to the values in the row becomes too thin. This is most notable when using long content.

If all rows have actions the content has the correct width.

This commit could be the culprit: https://github.com/alphagov/govuk-frontend/pull/2323/commits/29358635a77efa5a81b923ad644e42bc8481ce45

v3.14 v4.0 v4.0 with just one row
v3 14 0 v4 0 0 v4 0 0-no-other-rows
v4 If I add width 50% to the container
Screenshot 2022-01-12 at 16 05 13 Screenshot 2022-01-12 at 16 05 07

Design system examples

This bug is visible on the design system examples too (https://design-system.service.gov.uk/components/summary-list/#adding-actions-to-each-row) – look at the two contact details rows:

Screenshot 2022-01-12 at 16 18 57

Steps to reproduce the issue

See design system example

Actual vs expected behaviour

Expected content to remain the same width

Environment (where applicable)

36degrees commented 2 years ago

This seems to happen specifically if the first row does not have actions, at least in Chrome.

Setting width: 20% on .govuk-summary-list__row--no-actions:after seems to fix it – though we also probably only need the pseudo-element at all on tablet and above.