From 6481789bd30feece6948ed982ed6e5bc1b42e6b4 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 20 May 2026 23:10:56 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20team=20filter=20row=20always=20mounted?=
 =?UTF-8?q?=20=E2=80=94=20animate=20height=20continuously,=20no=20mount/un?=
 =?UTF-8?q?mount=20jank?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../channels/ui/QuickAddAgentPopover.tsx      | 85 ++++++++++---------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
index 9d761bae24..abed164275 100644
--- a/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
+++ b/desktop/src/features/channels/ui/QuickAddAgentPopover.tsx
@@ -519,49 +519,50 @@ export function QuickAddAgentPopover({
             ) : null}
           </div>
 
-          {/* Team toggles row — slides in between header and list */}
-          <AnimatePresence>
-            {selectMode ? (
-              <motion.div
-                key="team-row"
-                className="relative border-b px-3 pb-1 pt-0.5"
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                style={{ overflow: "hidden" }}
-              >
-                <div className="flex items-center gap-1.5 overflow-x-auto">
-                  {usableTeams.map((team, index) => (
-                    <motion.div
-                      key={team.id}
-                      initial={{ opacity: 0, x: index === 0 ? 0 : 12 }}
-                      animate={{ opacity: 1, x: 0 }}
-                      transition={{
-                        duration: 0.2,
-                        delay: index * 0.05,
-                      }}
-                      className="shrink-0"
+          {/* Team toggles row — always mounted, height animates based on selectMode */}
+          <motion.div
+            className="relative overflow-hidden"
+            initial={false}
+            animate={{
+              height: selectMode ? "auto" : 0,
+              opacity: selectMode ? 1 : 0,
+            }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="border-b px-3 pb-1 pt-0.5">
+              <div className="flex items-center gap-1.5 overflow-x-auto">
+                {usableTeams.map((team, index) => (
+                  <motion.div
+                    key={team.id}
+                    initial={false}
+                    animate={{
+                      opacity: selectMode ? 1 : 0,
+                      x: selectMode ? 0 : (index === 0 ? 0 : 12),
+                    }}
+                    transition={{
+                      duration: 0.2,
+                      delay: selectMode ? index * 0.05 : 0,
+                    }}
+                    className="shrink-0"
+                  >
+                    <Toggle
+                      className="h-6 rounded-full px-2.5 text-[11px]"
+                      onPressedChange={(pressed) =>
+                        handleTeamToggle(team, pressed)
+                      }
+                      pressed={selectedTeamIds.has(team.id)}
+                      size="sm"
+                      variant="subtle"
                     >
-                      <Toggle
-                        className="h-6 rounded-full px-2.5 text-[11px]"
-                        onPressedChange={(pressed) =>
-                          handleTeamToggle(team, pressed)
-                        }
-                        pressed={selectedTeamIds.has(team.id)}
-                        size="sm"
-                        variant="subtle"
-                      >
-                        {team.name}
-                      </Toggle>
-                    </motion.div>
-                  ))}
-                </div>
-                {/* Gradient fade on right edge — scroll affordance */}
-                <div className="pointer-events-none absolute right-0 top-0 h-full w-6 bg-gradient-to-l from-popover to-transparent" />
-              </motion.div>
-            ) : null}
-          </AnimatePresence>
+                      {team.name}
+                    </Toggle>
+                  </motion.div>
+                ))}
+              </div>
+              {/* Gradient fade on right edge — scroll affordance */}
+              <div className="pointer-events-none absolute right-0 top-0 h-full w-6 bg-gradient-to-l from-popover to-transparent" />
+            </div>
+          </motion.div>
 
           {/* Scrollable content — clips mid-item to hint at more */}
           <motion.div