Bug report: WordPress logo got squished on the header (learn.wordpress.org courses)

[retnonindya]

Description

The WP logo on the header area looks squished, and it seems like the issue happens on all courses (since the logo is on the header).

Step-by-step reproduction instructions

1. Go to any courses on learn.wordpress.com
2. See the header

For example:

• https://learn.wordpress.org/lesson/what-is-a-block/
• https://learn.wordpress.org/lesson/how-to-log-in-with-wp-admin/

Expected behaviour

The WP logo looks normal, as expected.

Actual behaviour and screenshots or screen recording (optional)

The logo looks squished. For example, this one from https://learn.wordpress.org/lesson/how-to-log-in-with-wp-admin/:

Environment information

MacOS Sonoma 14.0, Chrome browser Version 119.0.6045.105 -- but I think this happens on all browsers.

Workaround/findings

This is the CSS that caused the squished-look:

.wp-block-site-logo.is-default-size img {
    height: auto;
    width: 120px;
}

If we change the width to auto, it should fix the issue.

[jonathanbossenger]

Thank you for logging this @retnonindya

Diving into this a bit deeper, the CSS being applied comes from the gutenberg/build/block-library/style.css file.

The Sensei LMS CSS from sensei-lms/assets/dist/css/learning-mode.css applies the following styles

.sensei-course-theme .wp-block-site-logo img {
    max-height: 24px;
    width: auto;
}

Which is the correct behavior, and the Gutenberg style overrides this.

Initially, I was thinking of adding this to the Learn theme CSS, but this is enqueued before the SenseiLMS plugin or Gutenberg, so that's not going to be a solution.

For now, I have added the following rule to the Additional CSS in the Customiser, and will bring it up for further discussion.

.wp-block-site-logo.is-default-size img
{
    width:auto;
}

[adamwoodnz]

No longer an issue, with the launch of the 2024 block theme