[docs-infra] Polish API page design

[oliviertassinari]

Preview: https://deploy-preview-38196--material-ui.netlify.app/material-ui/api/alert/#props

An iteration on #37405 after the feedback in https://twitter.com/MUI_hq/status/1683914002332635137.

To help with https://twitter.com/goose_plus_plus/status/1683915602425962504 from @dmtrKovalenko, I have:

• Broke the badge border-radius to give it a direction
• Reduced the padding, using this gestalt rule: https://uxdesign.cc/how-to-enhance-your-design-with-the-gestalt-principles-of-proximity-a7828452058b

To help with https://twitter.com/StylesTrip/status/1683927012791193601, I have:

• Changed a bit the horizontal alignment of the badge

But I think that #38173 will do the reset.

[mui-bot]

Netlify deploy preview

https://deploy-preview-38196--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against d96a1e0

[alexfauquette]

Good for me but maybe @danilo-leal will have a better opinion

[danilo-leal]

Getting up to speed with this PR and just pushed a change that might go in the direction of the listed feedback. I think that removing the bottom border from the header container might help a lot with the content skimming ⎯ here's how it is looking at the moment:

I explored it without the container's background color + border but felt like it was a bit too naked and spaced out, particularly when seeing the anchor block icon there. But it could work too, although I prefer the above!

Also, left some commented code on the above commit as we iterate but will for sure clean it up before merging!

[oliviertassinari]

here's how it is looking at the moment:

I like the new separator, feel better 👍

I would personally change two things:

1. More py on the prop to be easier to read, from 4 to 6px:

Before	After

2. A -37px margin instead of -32px to be able for the prop to stand out but also to have the text with the same vertical alignment

Before	After

[danilo-leal]

Sweet, I had made the left alignment follow the container rather than the text element inside it but both work in my opinion even though I think I'd lean slightly more toward the -32px option. Either way, happy to go this way, too!

That said, I think this one is good to go! 🚢