<details> elements don't have to be so fugly try this one nerdy.dev/nice-details

This looks a little janky on Firefox compared to your video. Is there specific features that are missing causing this? Content doesn't seem contained like in the video.

I see it in Firefox yeah, the grid containment isn't present due to the missing ::details-content pseudo element I should be able to add a supports check and fix it. 1 moment!

kk, firefox has an acceptable layout now if the pseudo is missing ????????

in safari… looks like there's a nesting parsing issue somewhere? cc @jensimmons.bsky.social

I've always been partial to the arrows on the right hand side. This looks great though!

This is awesome! Love how the animation really enhances the UX, it makes it so clear to the user what just happened when they open the `<details>` element. Smooth and smart!

This is great! I love the animations. Details & Summary are turning out to be quite versatile. I managed to make a tab interface a few days ago. codepen.io/kdankov/pen/...

Hmm. I am fully, entirely in agreement with you that details don’t have to look terrible, and this is cool in concept. But… iOS Safari doesn’t like it. It’s not pretty. (Also, scroll is broken, but that might be codepen’s fault.) Maybe this is more “add a workaround for iOS” stuff, as usual.

OK, but that's eleventy one, that has to count for something.

Indeed, Safari is failing in a way I don't understand; it seems nesting related as entire style rules aren't applying. Firefox is good with the nesting though, so I'm feeling inclined to think it's a bug. I assume it's a non-issue if you process your nesting to flat selectors

chome-only.