From f15c436cd2e93e80a29ff7842a5854c7d14e341b Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 20 May 2026 22:26:37 -0700
Subject: [PATCH] Fix 's' animation: opacity only, no width transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The width:0→auto animation caused the 's' to render broken.
Just fade it in with opacity — it's one character, doesn't need
a width transition.
---
 .../channels/ui/QuickAddAgentPopover.tsx      | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
index cd4836e6a1..bbb4f84ee1 100644
--- a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
+++ b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
@@ -495,20 +495,16 @@ export function QuickAddAgentPopover({
           <div className="relative flex min-h-10 items-center gap-2 border-b pl-3 pr-1.5 py-1.5">
             {/* Title — always visible */}
             <h3 className="shrink-0 text-sm font-semibold text-foreground">
-              Add agent
-              <AnimatePresence>
-                {selectMode ? (
-                  <motion.span
-                    initial={{ opacity: 0, width: 0 }}
-                    animate={{ opacity: 1, width: "auto" }}
-                    exit={{ opacity: 0, width: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="inline-block overflow-hidden"
-                  >
-                    s
-                  </motion.span>
-                ) : null}
-              </AnimatePresence>
+              Add agent{selectMode ? (
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  s
+                </motion.span>
+              ) : null}
             </h3>
 
             {/* Team toggles — appear to the right of title */}