diff --git a/src/components/palette/DevicePalette.tsx b/src/components/palette/DevicePalette.tsx
index 078b4f5..32275d1 100644
--- a/src/components/palette/DevicePalette.tsx
+++ b/src/components/palette/DevicePalette.tsx
@@ -426,7 +426,7 @@ function DeviceRow({
       <div
         draggable={canEdit}
         onDragStart={(e) => onDragStart(e, template)}
-        className={`flex items-center justify-between rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm ${canEdit ? 'cursor-grab active:cursor-grabbing' : ''}`}
+        className={`flex flex-wrap items-center gap-y-1 rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm ${canEdit ? 'cursor-grab active:cursor-grabbing' : ''}`}
       >
         <div className="min-w-0">
           <div className="truncate font-medium text-slate-700">{template.name}</div>
@@ -436,7 +436,13 @@ function DeviceRow({
             {template.custom ? ' · custom' : ''}
           </div>
         </div>
-        <div className="ml-2 flex shrink-0 items-center gap-1 opacity-0 group-hover:opacity-100">
+        {/* `hidden`, not `opacity-0`, so the row's idle width isn't reserved
+            for buttons nobody's hovering to see — that reserved space was
+            squeezing long names down to almost nothing even at rest. Once
+            shown, `flex-wrap` on the row lets a crowded set (e.g. an Admin's
+            5 buttons) drop to its own line under the name instead of
+            squeezing it further. */}
+        <div className="ml-auto hidden shrink-0 items-center gap-1 group-hover:flex">
           {pendingEntityIds.has(template.id) ? (
             <span
               title="A submission for this device is pending Admin review"