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

Fix spacing between govspeak headings and attachment #4618

Merged
merged 1 commit into from
Feb 6, 2025

Conversation

andysellick
Copy link
Contributor

What / why

Add a margin bottom to govspeak H2 elements.

  • headings don't have margin bottom in govspeak, so rely on elements following them to have top margin for spacing
  • when followed by an attachment, this is a problem because an attachment is a gem component and therefore doesn't have top margin
  • solution is to add bottom margin to headings that does not exceed the top margin of other elements, so if both are present they will overlap without a visual difference
  • but for attachments the space will be provided by this new bottom margin
  • only doing this for H2 for now as this is the only example of this problem in the wild and I'm hesitant to make sweeping changes to govspeak

Visual Changes

Before After
Screenshot 2025-02-06 at 13 13 29 Screenshot 2025-02-06 at 13 13 45

Fixes #4072

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4618 February 6, 2025 13:23 Inactive
- headings don't have margin bottom in govspeak, so rely on elements following them to have top margin for spacing
- when followed by an attachment, this is a problem because an attachment is a gem component and therefore doesn't have top margin
- solution is to add bottom margin to headings that does not exceed the top margin of other elements, so if both are present they will overlap without a visual difference
- but for attachments the space will be provided by this new bottom margin
- only doing this for H2 for now as this is the only example of this problem in the wild and I'm hesitant to make sweeping changes to govspeak
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4618 February 6, 2025 13:26 Inactive
@andysellick andysellick requested a review from AshGDS February 6, 2025 14:15
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 - I noticed on the Issue that you mentioned you couldn't find an example page anymore, so I did a weird Google Search and managed to find one:

https://www.gov.uk/guidance/disposal-system-specifications

(The Google search was site:www.gov.uk "PDF" "Contents" "Corporate information" to try and find a page with similar content to the old page you had)

Looks like you can find more examples using that google search e.g. https://www.gov.uk/guidance/storage-guidance

@andysellick
Copy link
Contributor Author

@AshGDS thanks, great find.

Are you happy with the visual diff? I'm not sure what's causing it, but it seems minor.

@AshGDS
Copy link
Contributor

AshGDS commented Feb 6, 2025

@andysellick Looks OK to me 👍

@andysellick andysellick merged commit bf823a8 into main Feb 6, 2025
12 checks passed
@andysellick andysellick deleted the fix-govspeak-heading branch February 6, 2025 16:17
@andysellick andysellick mentioned this pull request Feb 11, 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.

Govspeak missing spacing between heading and attachment component
3 participants