Seperator doesn't look same

[SrivastavaArjit]

Hi folks,
I am using Shadcn for my Vite project and I am stuck with something.
So, I am using Shadcn seperator inside a map function but the height of seperator doesn't look same. Please have a look at the image.

Below is the image of my map function: -

I have been stuck with this for more than 24 hours now and I have no idea why this is happening any explanation or solution will be greatly appreciated.

[adi907]

Facing the same issue

Both separators seem to be having different darkness eventhough no added class is applied to them

[mo-shahab]

I am having the same issue, why is shadcn so chaotic sometimes ?

[joeychrys]

Same problem :/. for me its every other separator. they appear to alternate between height when placed in succession. If I define the className="h-[1.5px]" for each one that is small it works.

[xf3227]

Same problem here. Here is the source styling code of the Seperator component.

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)

We can see that it uses filled color (bg-border here) to render. Unfortunately, the size of a component is not absolute even with tailwind flex-none or max-* or min-*. This may explain why we see inconsistent rendering in different context.

Here is my solution, instead of using Seperator, we can simply use the following

<span className="border h-4 mx-2 border-foreground"></span>  {/* Vertical */}
<span className="border w-4 my-2 border-foreground"></span>  {/* Horizontal */}

The key idea is to utilize the border thickness which is always consistently rendered to my best knowledge.