bug(sidebar): SidebarSeparator causes overflow with horizontal orientation

[edouard-andrei]

Describe the bug

The SidebarSeparator component causes overflow issues when used with horizontal orientation. The component currently uses w-auto which conflicts with the underlying Separator component's default styling, leading to unwanted horizontal overflow.

Affected Components

• SidebarSeparator (all styles: default, new-york, new-york-v4)

Root Cause

The SidebarSeparator component applies w-auto unconditionally, but this conflicts with the Separator component's base classes which set different width behaviors based on orientation. The w-auto override should only apply to horizontal separators to prevent overflow issues.

Current Implementation

<Separator
  data-sidebar="separator"
  :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
>

Expected Behavior

The separator should not cause horizontal overflow and should respect the orientation-specific width styling.

Proposed Solution

Change w-auto to data-[orientation=horizontal]:w-auto to make the width override more specific and only apply to horizontal separators:

<Separator
  data-sidebar="separator"
  :class="cn('mx-2 data-[orientation=horizontal]:w-auto bg-sidebar-border', props.class)"
>

Additional Context

This issue is related to the same problem in the main shadcn-ui/ui library: https://github.com/shadcn-ui/ui/pull/8498

Screenshots