[bug]: Duplicate scrollbar due to component overflow in Sidbebar

[ashwinpraveengo]

Describe the bug

In our app care_fe#12232, we noticed a double-scrollbar issue in modules using shadcn/ui layout components. One scrollbar appears for the browser viewport, and one from the component itself, degrading UX.

After debugging, the issue was resolved by explicitly setting overflowX: "hidden" in the parent wrapper around the shadcn componen

Fix

<SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              overflowX: "hidden",// Add this line
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            "group/sidebar-wrapper bg-gray-100 flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>

Affected component/components

sidebar

How to reproduce

Go to side bar component

Codesandbox/StackBlitz link

No response

Logs

[...document.querySelectorAll('*')].filter(e => e.scrollWidth > e.clientWidth)
(14) [html, body, div#root, div.group/sidebar-wrapper.bg-gray-100.flex.min-h-svh.w-full.has-data-[variant=inset]:bg-sidebar

System Info

Chrome

Before submitting

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