Select Items Text moves inwards

[RocketDav1d]

Describe the bug

When the Text Content of a SelectItem is longer it moves inwards. This only seems to happen if the Text is longer than the width of the Select component. However for some SelectItems Texts it moves inwards not at all and also the extent to which the text moves inwards varies.

Affected component/components

Select, SelectItem

How to reproduce

1. use the Select component
2. input large Text for the SelectItem

Codesandbox/StackBlitz link

No response

Logs

no error logs, purely styling bug

System Info

issue occurs in all tested browsers (Chrome, Safari, Arc, Mozilla)

Before submitting

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

[Gamez0]

Found out inwards get big as the text, inwards get shorter when the text is short.

[Gamez0]

it can be simply fix by adding text-left to SelectTrigger className

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      // add text-left below
      "text-left flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    ...
))