Experimental and deprecated icons overlap when the topic is a sidebar heading

[mirunacurtean]

Summary

In MDN sidebars, pages that feature experimental and deprecated icons experience an overlap issue when the page's topic is also the sidebar heading. For example, on the PaymentAddress API page, the icons overlap with the sidebar heading.

URL

https://developer.mozilla.org/en-US/docs/Web/API/PaymentAddress

Reproduction steps

1. Navigate to an MDN page with experimental and deprecated icons.
2. Ensure the page's topic matches the sidebar heading.
3. Observe the overlapping icons in the sidebar

Expected behavior

Icons should be displayed without overlapping, maintaining clear visibility and readability.
Adjust the CSS styling for sidebar elements to ensure sufficient spacing between icons and headings.
Implement a conditional check to reposition icons when they coincide with the sidebar heading.

Actual behavior

Icons overlap with the sidebar heading, causing visual clutter and potential confusion.

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Windows

Screenshot

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.