Markdown details tag with default summary has incorrect cursor

This is a (minor) bug report.

On github.com, with the default GitHub stylesheet, the <details> tag only has cursor: pointer if a <summary> tag is included explicitly. If there is no <summary> tag, the cursor does not indicate that the dropdown is clickable. Here is an example of the incorrect style:

This is a test

The code for this incorrect version is:

<details>

This is a test

</details>

Compare that to explicitly including a <summary> tag, which behaves the way it is supposed to:

Details

This is another test

The code for the second example is:

<details>

<summary>Details</summary>

This is another test

</details>

This can be fixed by adding the following CSS to the stylesheet:

details {
  cursor: pointer;
}
1 Like

Thanks for letting us know about this @jstrieb !

Could you supply a link to where you see this happening?
A screenshot would be most helpful.

Thanks!

Hi @ernest-phillips, thanks for the response!

In my browser (Firefox 85.0.2 (64-bit)), it’s actually happening in the post above – I think the github.community stylesheet has the same issue. I can still provide screenshots of it happening on github.com though, and can also provide a Gist demo if that is preferable.

Thanks again!

Thanks for that additional context . The Community site is run on Discourse. I will look into seeing if we can make a change there.

The screenshot of this behavior on GitHub.com would be most helpful in relaying the info to our engineers.

Incorrect behavior screenshot:
image

Comparison to explicit inclusion of <summary>:
image

Screenshots taken from this demonstrative gist:
https://gist.github.com/jstrieb/ccb5c73ff92be6bc066145e80f517313

1 Like

@jstrieb thanks for the thorough breakdown of this issue.
I have reported this to our engineering team.

I can’t say when this will be fixed, and when it does it will likely not have any mention in a changelog. Please be assured that this information has been delivered to the proper team.

1 Like