fix: prevent agent progress layout jitter

The previous popLayout stabilization kept margin-based spacing, so exiting rows temporarily added 6px to bounded Agent lists.

Use flex gaps and a geometry regression check so exited rows no longer change container height.
This commit is contained in:
2026-07-21 10:15:19 +08:00
parent 7fbd8a5618
commit 21791b9cee
2 changed files with 57 additions and 4 deletions
@@ -237,7 +237,7 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
<motion.ol
key={listMode}
aria-label={expanded ? "全部执行进度" : "最近执行进度"}
className="mt-2 space-y-1.5 overflow-hidden"
className="mt-2 flex flex-col gap-1.5 overflow-hidden"
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
@@ -379,7 +379,7 @@ function PermissionList({
}) {
return (
<AgentNestedBlock icon={LockKeyhole} iconClassName="text-orange-600" title="权限请求">
<motion.div className="space-y-1.5" variants={agentPanelListVariants} animate="animate">
<motion.div className="flex flex-col gap-1.5" variants={agentPanelListVariants} animate="animate">
<AnimatePresence initial={false} mode="popLayout">
{permissions.slice(-4).map((permission) => (
<AnimatedDetailItem key={permission.requestId}>
@@ -496,7 +496,7 @@ function QuestionList({
}) {
return (
<AgentNestedBlock icon={HelpCircle} iconClassName="text-blue-600" title="补充信息" floating>
<motion.div className="space-y-1.5" variants={agentPanelListVariants} animate="animate">
<motion.div className="flex flex-col gap-1.5" variants={agentPanelListVariants} animate="animate">
<AnimatePresence initial={false} mode="popLayout">
{questions.slice(-3).map((request) => (
<AnimatedDetailItem key={request.requestId}>