From 02e23ed0ae81517225c51361619fa0a243595039 Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Fri, 1 May 2026 21:14:49 +0530
Subject: [PATCH] fix(ui): truncate overflowing SelectTrigger value

The Schema selector in the sidebar overflowed for long schema names
(e.g. `_prisma_dev_wal`), pushing the chevron out of view.

Two compounding causes inside `SelectTrigger`:

- Adding the `label` prop wrapped the value in an extra `<div>`, so the
  existing `[&>span]:line-clamp-1` rule no longer matched the value span.
- That wrapper `<div>` had no width constraint, so its content could
  grow past the trigger's bounds.

Flatten the trigger to render `label`, value, and chevron as direct
flex children. The label and chevron stay `shrink-0`; the value gets
`flex-1 min-w-0 truncate text-left` so long values ellipsize cleanly
while the chevron stays anchored on the right.
---
 ui/components/ui/select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/components/ui/select.tsx b/ui/components/ui/select.tsx
index 2407da27..bf94aeb2 100644
--- a/ui/components/ui/select.tsx
+++ b/ui/components/ui/select.tsx
@@ -20,15 +20,15 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between gap-1 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
   >
-    <div className="flex items-center gap-1">
-      {label && <span className="text-muted-foreground">{label}:</span>}
-      {children}
-    </div>
+    {label && (
+      <span className="shrink-0 text-muted-foreground">{label}:</span>
+    )}
+    <span className="min-w-0 flex-1 truncate text-left">{children}</span>
     <SelectPrimitive.Icon className="flex shrink-0 items-center justify-center opacity-50">
       <ChevronDown className="h-4 w-4" />
     </SelectPrimitive.Icon>