[docs][joy-ui] Refine the Messages template

[zanivan]

• I have followed (at least) the PR section of the contributing guide.

Refining the Messages template, aiming to remove most of the custom styles and overrides, making it closer as possible to the default theme.

Part of #38582

https://deploy-preview-38807--material-ui.netlify.app/joy-ui/getting-started/templates/messages/

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 91e8e87

[oliviertassinari]

The new side nav menu looks a lot better 👍

1. There are multiple issues with the keyboard, the focus style is off, and some of the items can't be tab to.

Screen.Recording.2023-09-06.at.15.16.12.mov

3. The scroll container position feels off, it should have no gap with the border, no?

[zanivan]

There are multiple issues with the keyboard, the focus style is off, and some of the items can't be tab to.

Hey thanks for the feedback! It's probably due to the usage of accordion component instead of the list on the sidebar. I'll fix this, like @siriwatknp did on #38599.

[siriwatknp]

@zanivan Please see the fix in 93994c5, the root cause is that, ListItem produce <li> which should not be a descendant of the upper <li>.

Before

<li>
  <div role="button">
    <li>…</li> {/* this is wrong */}
  </div>
</li>

After

<li>
  <div role="button">
    <div>…</div>
  </div>
</li>

For nested list, it must follow ul > li > ul > li, … and so on.

[danilo-leal]

This is looking great! I'm excited to see more templates getting refined! 🤘
Some things I noticed we could improve:

Screenshot	Note
	We could standardize the mobile navbar with the other templates by making it higher than the content on the page (i.e., adding box shadows). I think the Profile template did this well!
	This button's border-radius doesn't seem consistent with the others used throughout the page! I guess we could also give a bit more breathing room to the container that's holding it.
	I think we should make sure there's horizontal alignment here of the top-positioned elements. Maybe standardize the padding/sizes throughout?

[siriwatknp]

👍