fix: agent panel layout

src/components/agent-tasks/batch-card.tsx

@@ -127,7 +127,7 @@ export function BatchCard({
   return (
     <motion.article
       layout={animate ? "position" : false}
-      initial={animate ? { opacity: 0, y: 6 } : false}
+      initial={animate ? { opacity: 0.6, y: 6 } : false}
       animate={{ opacity: 1, y: 0 }}
       transition={animate ? MOTION_SPRING.gentle : { duration: 0 }}
       data-slot="agent-batch"

src/components/agent-tasks/routines-panel.tsx

@@ -346,33 +346,25 @@ export function AgentRoutinesPanel({
                         {t("common.buttons.delete")}
                       </Button>
                     </div>
-                    <AnimatePresence initial={false}>
-                      {open && (
-                        <motion.div
-                          initial={animate ? { opacity: 0, height: 0 } : false}
-                          animate={{ opacity: 1, height: "auto" }}
-                          exit={
-                            animate
-                              ? { opacity: 0, height: 0 }
-                              : { opacity: 0, transition: { duration: 0 } }
-                          }
-                          transition={
-                            animate
-                              ? {
-                                  duration: MOTION_DURATION.base,
-                                  ease: MOTION_EASE_OUT,
-                                }
-                              : { duration: 0 }
-                          }
-                          className="overflow-hidden"
-                        >
-                          <RunHistory
-                            routineId={routine.id}
-                            profileNames={profileNames}
-                          />
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
+                    {open && (
+                      <motion.div
+                        initial={animate ? { opacity: 0.6, y: -2 } : false}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={
+                          animate
+                            ? {
+                                duration: MOTION_DURATION.base,
+                                ease: MOTION_EASE_OUT,
+                              }
+                            : { duration: 0 }
+                        }
+                      >
+                        <RunHistory
+                          routineId={routine.id}
+                          profileNames={profileNames}
+                        />
+                      </motion.div>
+                    )}
                   </motion.div>
                 );
               })}

src/components/agent-tasks/step-stream.tsx

@@ -48,7 +48,7 @@ function StepRow({ step, animate }: { step: AgentStep; animate: boolean }) {
     <motion.li
       data-slot="agent-step"
       data-kind={step.kind}
-      initial={animate ? { opacity: 0, y: 4 } : false}
+      initial={animate ? { opacity: 0.6, y: 4 } : false}
       animate={{ opacity: 1, y: 0 }}
       transition={
         animate
@@ -208,8 +208,10 @@ export function StepStream({
 
   useEffect(() => {
     if (stepCount === 0) return;
-    endRef.current?.scrollIntoView({
-      block: "end",
+    // Only the list scrolls; scrollIntoView would move the page too.
+    const box = endRef.current?.parentElement;
+    box?.scrollTo({
+      top: box.scrollHeight,
       behavior: animate ? "smooth" : "auto",
     });
   }, [stepCount, animate]);

src/components/agent-tasks/task-composer.tsx

@@ -110,12 +110,12 @@ export function TaskComposer({
         ref={promptRef}
         id={`${formId}-prompt`}
         variant="soft"
-        rows={3}
+        rows={2}
         value={prompt}
         maxLength={MAX_PROMPT_CHARS}
         placeholder={t("agent.tasks.promptPlaceholder")}
         data-slot="agent-task-prompt"
-        className="min-h-24 resize-none rounded-xl px-3.5 py-3 text-sm leading-relaxed"
+        className="min-h-20 resize-none rounded-xl px-3.5 py-3 text-sm leading-relaxed"
         onChange={(event) => {
           setPrompt(event.target.value);
         }}

src/components/agent-tasks/tasks-panel.tsx

@@ -53,7 +53,9 @@ export function AgentTasksPanel({
   }, [batches, picked]);
 
   return (
-    <div
+    // On a short window the whole panel scrolls; on a tall one the run list
+    // and the step stream fill it and scroll on their own.
+    <FadingScrollArea
       data-slot="agent-tasks"
       className="@container flex min-h-0 flex-1 flex-col gap-4"
     >
@@ -85,7 +87,7 @@ export function AgentTasksPanel({
           </p>
         </div>
       ) : (
-        <div className="flex min-h-0 flex-1 flex-col gap-4 @3xl:flex-row">
+        <div className="flex min-h-[26rem] flex-1 flex-col gap-4 @3xl:flex-row">
           <FadingScrollArea className="min-h-0 @3xl:w-[min(26rem,45%)] @3xl:shrink-0">
             <div className="flex flex-col gap-5 pr-1">
               {batches.map((batch) => (
@@ -110,7 +112,7 @@ export function AgentTasksPanel({
             </div>
           </FadingScrollArea>
           {selection && (
-            <div className="flex min-h-72 min-w-0 flex-1 flex-col rounded-2xl bg-foreground/3 p-4">
+            <div className="flex min-h-80 min-w-0 flex-1 flex-col rounded-2xl bg-foreground/3 p-4">
               <StepStream
                 key={`${selection.batch.id}:${selection.task.profileId}`}
                 batch={selection.batch}
@@ -124,6 +126,6 @@ export function AgentTasksPanel({
           )}
         </div>
       )}
-    </div>
+    </FadingScrollArea>
   );
 }