[bug]: Sidebar horizontal scroll bar appear when expand

[JingerTea]

Describe the bug

When the sidebar transitions from collapsed to expanded state, a horizontal scrollbar briefly appears for about 1 second during the animation. This creates an undesirable visual effect and slight layout shift.

Affected component/components

• Sidebar - SidebarContent

How to reproduce

1. Implement the Sidebar component with collapsible functionality
2. Set the initial state to collapsed
3. Click the toggle button to expand the sidebar
4. Observe the brief appearance of a horizontal scrollbar during the expansion animation

Codesandbox/StackBlitz link

import { Sidebar, SidebarContent, SidebarTrigger } from "@/components/ui/sidebar" export default function Demo() { return ( {/ Content that might cause overflow /}

Some content here...

) }

Logs

No response

System Info

- Browser: Chrome, Firefox, Safari (issue appears in all major browsers)
- OS: Cross-platform issue
- React version: 18.x
- Next.js version: 15.x

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[JingerTea]

To fix this we need to modify line in sidebar.tsx, this will resolve overflow issue when expand sidebar

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden",
        "group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})