In markdown, update summary > heading style

[heiskr]

What are you trying to accomplish?

Rendering a heading in a summary tag in Markdown currently looks a bit goofy.

Hello Hello!

Some fantastical text

It would be great if instead it looked more intentional like:

This would also help the Docs team with accessibility for an upcoming project. For Hubbers, you should see the reference link below the original post of this pull request.

What approach did you choose and why?

I looked and tried to find the best file available for this. There doesn't appear to be any custom styling for details/summary in Markdown, just some general styles. Not sure if this would be a good global property, or better limited to just Markdown rendering.

What should reviewers focus on?

Hmmm... not sure :) Happy to make any needed changes.

Are additional changes needed?

• No, this PR should be ok to ship as is. 🚢

cc @emilyistoofunky @parkerbxyz

[changeset-bot]

🦋 Changeset detected

Latest commit: 8c29aea

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[simurai]

This looks like a good improvement. 👍

One thing that feels a bit weird is having that border not span across the whole width (due to being inline-block). I played a bit around but couldn't really find a good solution.

So maybe for now we could remove that border and also the extra padding? Maybe by adding:

.markdown-body {
  summary {
    h1,
    h2 {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
}

[heiskr]

It looks like your welcome Actions workflow may need some additional token permissions to run on non-member pull requests:

permissions:
  contents: read
  pull-requests: write

https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token

[simurai]

👍

[parkerbxyz]

👋 @heiskr @simurai Today I noticed the anchor links for the headers overlap the drop down icon for the lists:

Screen.Recording.2022-04-27.at.4.55.08.PM.mov

I’m posting it here first because I’m assuming it’s related to this PR, but I’d be happy to open a new issue for this if you’d like.

[simurai]

@parkerbxyz Today I noticed the anchor links for the headers overlap the drop down icon for the lists:

Thanks for reporting.. 🙇 this follow-up PR #2048 should fix it.