[bug]: vertical separator not rendering

[OliverGilan]

Describe the bug

When using the separator with a "vertical" orientation it does not render properly. Looking at the browser dev tools it appears to have a size of 1x0 pixels.

Changing the default style here to use min-h-full instead of just h-full seems to fix this.

Seems to be the same as this issue encountered in the shadcn-svelte port

Affected component/components

Separator

How to reproduce

1. Place a Separator in a flex parent with two other components and orientation "vertical"

<div className="flex flex-row flex-nowrap gap-4 h-fit">
          <p>Foo</p>
          <Separator orientation="vertical" />
          <p>Bar</p>
 </div>

2. The separator will not appear
3. Change style within components/ui/separator.tsx

<SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
        className
      )}
      {...props}
    />

4. Separator will now render

Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-t7h9sc?file=components%2Fui%2Fseparator.tsx

Logs

No response

System Info

M2 Mac,
Firefox

Before submitting

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

[OliverGilan]

Opened a PR to help fix this!

[TharindaPrabhath]

In my case, I had to define the height explicitly in the className prop. Then, it was displayed.

[OliverGilan]

Yes explicitly setting a height does work but the default behavior of the component should be that it fills up the height of the parent which isn't happening. Can always override that with the className prop even with this change

[TharindaPrabhath]

Yes, agree.

[gerardsiles]

it has an easy fix, on the primitive root change:

 className={cn(
    "shrink-0 bg-border",
    orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
    className,
  )}

  for:

       className={cn(
    "shrink-0 bg-border",
    orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
    className,
  )}

setting min-h-full should fix this this issue when set to vertical

[OliverGilan]

Yes that is the fix I used and it's what I have in the PR I opened for this