From 56a7111c79a09776bcca0be5cc01d4608511c3c6 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Wed, 9 Sep 2026 04:01:09 +0000
Subject: [PATCH] fix: restore completed agent card mobile layout

---
 client/src/components/cos/tabs/AgentCard.jsx  |  6 +++---
 .../components/cos/tabs/AgentCard.test.jsx    | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/client/src/components/cos/tabs/AgentCard.jsx b/client/src/components/cos/tabs/AgentCard.jsx
index 84d1bf96d6..69f7601c4b 100644
--- a/client/src/components/cos/tabs/AgentCard.jsx
+++ b/client/src/components/cos/tabs/AgentCard.jsx
@@ -548,9 +548,9 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
       <div className={completed ? "p-3 [overflow-wrap:anywhere]" : "p-4"}>
         {/* Top row: Agent ID, badges, and actions */}
         <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-1 mb-2">
-          <div className="flex items-center gap-2 flex-wrap min-w-0 flex-1 basis-64">
+          <div className="flex items-center gap-2 flex-wrap min-w-0 flex-1 basis-0 sm:basis-64">
             <Cpu size={16} aria-hidden="true" className={`shrink-0 ${inactive ? 'text-gray-500' : 'text-port-accent animate-pulse'}`} />
-            <span className="font-mono text-sm text-gray-400 truncate">{agent.id}</span>
+            <span className="font-mono text-sm text-gray-400 truncate min-w-0">{agent.id}</span>
             <button
               type="button"
               onClick={(event) => {
@@ -611,7 +611,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
             )}
           </div>
           {/* Actions - right side */}
-          <div className="flex items-center gap-2 shrink-0 ml-auto">
+          <div className="flex items-center gap-2 shrink-0 ml-0 sm:ml-auto">
             {(output.length > 0 || inactive) && (
               <button
                 onClick={() => setExpanded(!expanded)}
diff --git a/client/src/components/cos/tabs/AgentCard.test.jsx b/client/src/components/cos/tabs/AgentCard.test.jsx
index 9e23090a0b..a2bd14a2bd 100644
--- a/client/src/components/cos/tabs/AgentCard.test.jsx
+++ b/client/src/components/cos/tabs/AgentCard.test.jsx
@@ -226,6 +226,26 @@ describe('AgentCard agent ID', () => {
   });
 });
 
+describe('AgentCard responsive header', () => {
+  it('keeps the identity and actions rails flexible on narrow cards', () => {
+    const onDelete = vi.fn();
+    const onResume = vi.fn();
+
+    render(
+      <MemoryRouter>
+        <AgentCard agent={agent} completed onDelete={onDelete} onResume={onResume} />
+      </MemoryRouter>
+    );
+
+    const actions = screen.getByRole('button', { name: 'Show' }).parentElement;
+    const identity = actions.previousElementSibling;
+
+    expect(identity).toHaveClass('basis-0', 'sm:basis-64');
+    expect(screen.getByText(agent.id)).toHaveClass('min-w-0');
+    expect(actions).toHaveClass('ml-0', 'sm:ml-auto');
+  });
+});
+
 describe('AgentCard transcript truncation (#3498)', () => {
   it('says the transcript was clipped when the server returns a capped tail', async () => {
     const user = userEvent.setup();