Display/alignment issues with collapsible "MDN Baseline alert" boxes

[ZStoner]

Bug report

Overview:

• When viewing docs sourced from MDN that have a "Baseline Alerts" box at the top (like CSS/HTML docs), the style formatting of the <details>/<summary> tags could use some improvements.
  • DevDocs Example Page: HTML:<div>
• Recently I noticed that the styling used for the Baseline Alerts box now has shading and a border. Nice. 👍
  • But, I still see the collapsible arrow widget is not lined up with its text, regardless if Closed (▶︎) or Opened (▼︎)

OS information

• Windows 11: Chrome and Edge.
• Windows 10: Chrome, Edge and Firefox.

Steps to reproduce

1. Navigate to a DevDocs page that was sourced from MDN and contains a "Baseline Alert" box.
   • Example link: HTML:<div>
2. Observe the collapsed "Baseline" alert box at the top of the page. {State:Closed (▶︎)}.
   • Note the placement of the Expand/Collapse widget in relation to the "Baseline widely available" heading.
3. Click the widget to expand the box. {State:Opened (▼︎)}.
   • Again note the placement of the widget with respect to the "Baseline..." heading text.
4. Ideally the <details>/<summary> text should be alongside the widget glyph.
   • Using the F12 DevTools, I see that the actual text is wrapped in an <H2> header tag with no special handling, but <H2> is generally a block element, not inline.

More resources

Here's snippets showing the current layout issues of the Baseline alert boxes...

Default: Closed	Default: Opened

Possible fix

If the following (or equivalent) CSS Style changes were made, it could look and behave much better:

• details { padding-left: 10px; }
  • This adds a small padding buffer next to the widget.
• summary > h2 { display: contents; }
  • This removes the "block" state for <h2> when within a <summary> tag and places the text next to the glyph.
  • Both display:inline or display:contents works here... I'll let the team decide what's best.

If applied, it would look similar to this...

Proposed: Closed	Proposed: Opened