fix(select): enable text truncation with responsive widths

[nathannewyen]

Summary

• Added min-w-0 to SelectValue to allow it to shrink below content size in flex containers
• Changed line-clamp-1 to truncate for more reliable single-line text truncation with ellipsis

Problem

When using SelectTrigger with responsive widths like w-full or flex-1, the line-clamp-1 class on SelectValue doesn't truncate text properly. The text overflows instead of showing an ellipsis.

Root Cause

1. line-clamp uses -webkit-line-clamp which doesn't work reliably in flex containers
2. Flex items have min-width: auto by default, preventing them from shrinking below content size

Solution

• min-w-0: Allows the flex item to shrink below its content size
• truncate: Uses overflow-hidden text-ellipsis whitespace-nowrap which works reliably for single-line truncation in flex containers

Before

Text overflows the container when SelectTrigger uses w-full or flex-1

After

Text properly truncates with ellipsis when it exceeds the container width

Fixes #8959

Test plan

• Add a Select with w-full on the trigger
• Select an option with long text
• Verify the text truncates with ellipsis instead of overflowing

[vercel]

@nathannewyen is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[LuziferSenpai]

This does not work.
I just tested this on the setup I use here: #8959

It still does not clamp correctly.

I already made a working fix: #8981

You can also test your fix here: https://start.luzifersenpai.de/

[nathannewyen]

Closing in favor of #8981 - the grid-based approach is the correct fix. Thanks @LuziferSenpai for testing and pointing this out!