Remove padding-right from details component

[edwardhorsford]

The details element doesn't need padding-right - having it will mean contents don't line up nicely with the rest of the page.

Browser	Before	After
Chrome
Safari mobile

[lfdebrux]

This was discussed in a thread asking why the right padding is present in the #govuk-design-system channel in x-gov Slack. I shared the question with designers in an internal Slack thread, @joelanman and @christopherthomasdesign agreed that it didn't need to be there. Looking at the git history, the right padding has been there since this component was added (see commit 2e6769a), with no reason given as to why it is there.

[36degrees]

Looking at the git history, the right padding has been there since this component was added (see commit 2e6769a), with no reason given as to why it is there.

The details component came from Elements, where it was known as hidden text. In Elements, it used the 'panel' styles which were shared with inset text and conditional reveals, so changes to those panel styles affected all three things.

At one point, there was no right padding on the panel. However, this was changed in alphagov/govuk_elements@af2375b (part of alphagov/govuk_elements#106), when the spacing was adjusted 'so the padding is 15px on all sides'. As far as I can tell, there's been padding on all sides ever since.

I do think this change makes sense though – it makes it consistent with the conditional reveals which don't have right padding either.

[36degrees]

Just to record a conversation from Slack – we discussed whether the right padding should be retained at the mobile breakpoint as it can look a little 'unbalanced', and adding padding on both sides emphasises the ‘inset’ nature:

Before	After

However, we ultimately agreed to remove the right padding on mobile (which is the change already proposed in this PR) because:

• it's consistent with the way padding works on conditional reveals
• it maximises the horizontal space available to users to see what they're writing, especially on smaller screens

[36degrees]

Thanks for this @edwardhorsford – are you able to add an entry to the changelog?

It'd also be really useful to include before/after screenshots in the PR description, if possible.

[edwardhorsford]

@36degrees updated description with your screenshots and added an entry in the changelog.

[36degrees]

Rebased against main to resolve a conflict in the changelog.