Catalyst: SidebarLayout overflow

[fouteox]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/sidebar-layout
• Component name: SidebarLayout

Describe the bug If you try to put many items, the overflow is not correct on mobile.

To Reproduce Steps to reproduce the behavior: Add several items until it takes up the full height.

Expected behavior Items should not overflow.

Screenshots

Browser/Device (if applicable)

• OS: Mac OS (but all I think)
• Browser Firefox and Safari
• Version 127 for firefox and latest for safari

Additional context No problem in desktop mode.

[thecrypticace]

Hey, thanks for pointing this out — I've fixed this in Catalyst and the updated version is available on Tailwind UI.

You can either download a new copy of the components or you can add min-h-0 to the <Sidebar> component in sidebar.tsx like so:

export function Sidebar({ className, ...props }: React.ComponentPropsWithoutRef<'nav'>) {
-  return <nav {...props} className={clsx(className, 'flex h-full flex-col')} />
+  return <nav {...props} className={clsx(className, 'flex h-full min-h-0 flex-col')} />
}

Hope that helps! ✨