Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust attachment component spacing #4669

Merged
merged 3 commits into from
Mar 5, 2025
Merged

Adjust attachment component spacing #4669

merged 3 commits into from
Mar 5, 2025

Conversation

andysellick
Copy link
Contributor

@andysellick andysellick commented Mar 5, 2025

What

Adjust the margins on the attachment component so that the component has a default margin bottom set on the outer element, rather than controlled by the bottom margins of inner elements sticking out.

Also make the attachment thumbnails a bit smaller on mobile.

Why

Trying to make the component margin spacing more consistent and this relates to that work. This will also improve the spacing around attachments when included inside govspeak.

Also fixes #4662

Visual Changes

Margin bottom spacing changes (blue and red outlines have been added only to clarify boundaries of the component).

Before After
Screenshot 2025-03-05 at 09 28 53 Screenshot 2025-03-05 at 09 27 27

Spacing when attachments contain a details element.

Before After
Screenshot 2025-03-05 at 09 29 00 Screenshot 2025-03-05 at 09 27 41

Improved spacing shown in govspeak:

Screenshot 2025-03-05 at 09 27 53

Size of attachment thumbnail on mobile (shown at 320px).

Before After
Screenshot 2025-03-05 at 10 17 17 Screenshot 2025-03-05 at 10 17 06

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4669 March 5, 2025 10:24 Inactive
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4669 March 5, 2025 10:29 Inactive
@andysellick andysellick requested a review from AshGDS March 5, 2025 11:03
Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 Does it need a changelog entry?

- margin bottom of attachments was being set by margins of elements inside the component, which is brittle since the contents can vary
- instead, set a default margin bottom on the component
- remove inner margins
- also improves spacing when attachments are included in govspeak
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4669 March 5, 2025 12:38 Inactive
@andysellick andysellick merged commit 4f8a1fa into main Mar 5, 2025
12 checks passed
@andysellick andysellick deleted the attachment-spacing branch March 5, 2025 12:41
@andysellick andysellick mentioned this pull request Mar 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Attachment thumbnails take up too much space on mobile
3 participants