[Bug]: Text in the Select component is not left-aligned when it overflows.

[elio2t]

Reproduction

https://stackblitz.com/edit/uogwrz?file=src%2FApp.vue

Describe the bug

When the text of the selected item in the Select component overflows, it is not left-aligned. I placed a select without overflow next to it for comparison:

I was able to fix the issue by adding the Tailwind class [&>span]:text-left to the SelectTrigger component. I also noticed that the chevron icon on the right of the select changes size but I haven’t found the cause of the issue.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 64.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.7.0 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 9.6.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.120
    Safari: 17.6
  npmPackages:
    @vueuse/core: ^10.11.0 => 10.11.0 
    radix-vue: ^1.9.2 => 1.9.2 
    vue: ^3.4.29 => 3.4.34

Contributes

• [X] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests