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 underline on organisation logo component #2949

Merged
merged 1 commit into from
Sep 9, 2022
Merged

Conversation

andysellick
Copy link
Contributor

What

Fix the underline on the organisation logo component.

Why

This appears to be being caused by a bug in Chromium related to the use of position: relative and top: 3px - the underline on the element is not adjusted, meaning that the text is pushed down 3px, slightly overlapping the underline (if you increase the value for top you can make the underline eventually appear above the text).

The bug has only been recently reported but we don't really need to have this CSS on this element - the same effect can be achieved by increasing the padding above the element by 3px.

Visual Changes

Tested in various Chromes and Chrome on mobile.

Before After
Screenshot 2022-09-09 at 09 36 32 Screenshot 2022-09-09 at 09 36 37

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-2949 September 9, 2022 08:38 Inactive
@andysellick andysellick changed the title Fix underline on org logo component Fix underline on organisation logo component Sep 9, 2022
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-2949 September 9, 2022 08:40 Inactive
Copy link
Contributor

@MartinJJones MartinJJones left a comment

Choose a reason for hiding this comment

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

Looks good to me, nice work!,

Copy link
Contributor

@NickColley NickColley left a comment

Choose a reason for hiding this comment

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

Non-blocking: Is it possible to avoid the use of relative positioning to solve this, thereby simplifying the CSS itself?

@andysellick
Copy link
Contributor Author

Non-blocking: Is it possible to avoid the use of relative positioning to solve this, thereby simplifying the CSS itself?

Sorry @NickColley, can you clarify? I've removed the relative positioning.

@NickColley
Copy link
Contributor

Ah yeah, I missed that in the diff, nice fix. sorry for the confusion

@andysellick andysellick merged commit 1d8b1e7 into main Sep 9, 2022
@andysellick andysellick deleted the fix-org-logo branch September 9, 2022 09:50
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.

5 participants