giving up is real part n+1

ui/src/components/ui/select.tsx

@@ -20,10 +20,10 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
     <SelectPrimitive.Value
       data-slot="select-value"
-      className={cn("flex flex-1 text-start", className)}
+      className={cn("flex min-w-0 flex-1 truncate text-start", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectTrigger({
@@ -116,11 +116,11 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
-      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+      <SelectPrimitive.ItemText className="flex min-w-0 flex-1 gap-2 whitespace-nowrap">
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
@@ -131,7 +131,7 @@ function SelectItem({
         <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({

ui/src/pages/DevicesPage.tsx

@@ -10,7 +10,6 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from "@/components/ui/select";
 import { DeviceInventoryTable } from "@/pages/devices/DeviceInventoryTable";
 import { WakeHistoryCard } from "@/pages/devices/WakeHistoryCard";
@@ -39,6 +38,11 @@ type Props = {
   onAfterWake?: () => Promise<void>;
 };
 
+function middleEllipsis(value: string, head = 16, tail = 10): string {
+  if (value.length <= head + tail + 3) return value;
+  return `${value.slice(0, head)}...${value.slice(-tail)}`;
+}
+
 export function DevicesPage({
   agents,
   selectedAgentId,
@@ -339,13 +343,23 @@ export function DevicesPage({
                 }}
               >
                 <SelectTrigger className="w-full min-w-0">
-                  <SelectValue placeholder="Select agent" />
+                  <span className="min-w-0 flex-1 truncate text-start">
+                    {selectedAgentId
+                      ? middleEllipsis(selectedAgentId)
+                      : "Select agent"}
+                  </span>
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent
+                  className="max-w-[min(92vw,30rem)]"
+                  alignItemWithTrigger={false}
+                >
                   {agents.map((agent) => (
-                    <SelectItem key={agent.agent_id} value={agent.agent_id}>
-                      {agent.agent_id} (
-                      {agent.connected ? "connected" : "offline"})
+                    <SelectItem
+                      key={agent.agent_id}
+                      value={agent.agent_id}
+                      className="pe-10"
+                    >
+                      {middleEllipsis(agent.agent_id, 14, 8)}
                     </SelectItem>
                   ))}
                 </SelectContent>