Contact list slide-over overflow issue.

[iamcarlos94]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/overlays/slide-overs
• Component name: Contact list example

Describe the bug When there is only one person in the team, the MenuItems are cut off from view and require scrolling.

Also, this one I'm not sure but when using the Vue component, there is an attribute x-descriptions which I believe is for React? <nav class="-mb-px flex space-x-6" x-descriptions="Tab component">

Screenshots

[RobinMalfait]

Hey @iamcarlos94! 👋

In these situations we generally recommend using Floating UI to properly position the dropdown menus. This is something that the underlying library, Headless UI, supports.

You can find a working example of how to implement Floating UI with the Headless UI Menu (dropdown) component here:

• A React implementation, and a demo can be found here.
• A Vue implementation, and a demo can be found here.

We considered adding Floating UI directly to Tailwind UI for situations like this, but we're concerned it's going too far with the implementation. Not everyone needs Floating UI for their dropdowns, it adds a bunch of extra code, and our focus is really on providing solid design patterns more than specific implementation details, so we've opted to keep things simpler for now and leave it up to the customer to decide if they'd like to implement Floating UI in their apps. That said, I could see us eventually adding something about Floating UI in the Tailwind UI documentation.

I hope that all makes sense! 🤟