fix(studio): usage project selector truncation (#38546)

* fix: truncation on usage selector

Fixes the project selector truncation for selected value in the selector.

* chore: move truncation to component itself

* nit: prevent cehvron from shrinking

* chore: tidy up

packages/ui/src/components/shadcn/ui/select.tsx

@@ -50,6 +50,7 @@ const SelectTrigger = React.forwardRef<
       'flex w-full items-center justify-between rounded-md border border-strong hover:border-stronger bg-alternative dark:bg-muted hover:bg-selection text-xs ring-offset-background-control data-[placeholder]:text-foreground-lighter focus:outline-none ring-border-control focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200',
       'data-[state=open]:bg-selection data-[state=open]:border-stronger',
       'gap-2',
+      '[&>span]:truncate [&>span]:w-[20ch] text-left', // [kemal] This is to prevent double lines rendering when a string is particularly long.
       SelectTriggerVariants({ size }),
       className
     )}
@@ -57,7 +58,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 text-foreground-lighter" strokeWidth={1.5} />
+      <ChevronDown className="h-4 w-4 text-foreground-lighter flex-shrink-0" strokeWidth={1.5} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))