From e225a8e47d6cb5e1b5db0317a7df63b31f711188 Mon Sep 17 00:00:00 2001
From: cryppadotta <34892728+cryppadotta@users.noreply.github.com>
Date: Sat, 10 Oct 2026 01:38:15 +0000
Subject: [PATCH] Fix recovery sibling key and exercise per-card width
 constraints

---
 ui/src/pages/IssueDetail.tsx                         |  2 +-
 .../stories/task-context-notices.stories.tsx         | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 1b1a9b823e..d82c3255cf 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -7631,7 +7631,7 @@ export function TaskDetailSurface({ conversation, tasksTab }: { tasksTab?: TaskS
           />
 
           {resolvedDetailTab === "chat" && (
-            <WorkspaceExportRecovery key={issue.activeRecoveryAction?.id ?? issue.id} issueId={issue.id}
+            <WorkspaceExportRecovery key={`workspace-export:${issue.activeRecoveryAction?.id ?? issue.id}`} issueId={issue.id}
               className={shellSectionClass}
               action={issue.activeRecoveryAction ?? null} canManage={canManageBoardRuntime} onQueued={invalidateIssueDetail} />
           )}
diff --git a/ui/storybook/stories/task-context-notices.stories.tsx b/ui/storybook/stories/task-context-notices.stories.tsx
index 2ce3b29992..f92b8ffaaa 100644
--- a/ui/storybook/stories/task-context-notices.stories.tsx
+++ b/ui/storybook/stories/task-context-notices.stories.tsx
@@ -7,6 +7,8 @@ import { ExecutionBlockerNotice } from "@/components/ExecutionBlockerNotice";
 import { EmailMessageCard } from "@/components/EmailMessageCard";
 import { queryKeys } from "@/lib/queryKeys";
 
+const shellSectionClass = "mx-auto w-full max-w-(--tc-shell-max-w)";
+
 function TaskContextNotices() {
   const [client] = useState(() => {
     const cache = new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, retry: false } } });
@@ -21,12 +23,13 @@ function TaskContextNotices() {
   return (
     <QueryClientProvider client={client}>
       <main className="min-h-screen bg-background p-6 text-foreground">
-        <div className="mx-auto w-full max-w-(--tc-shell-max-w) space-y-3">
-          <h1 className="text-xl font-semibold">Chat connection and recovery</h1>
-          <ExternallyConnectedTaskBanner className="mt-3" companyId="demo" issueId="context-notices" />
-          <ExecutionBlockerNotice companyId="demo" issueId="context-notices" onRetried={() => {}}
+        <div className="w-full space-y-3">
+          <h1 className={`${shellSectionClass} text-xl font-semibold`}>Chat connection and recovery</h1>
+          <ExternallyConnectedTaskBanner className={`${shellSectionClass} mt-3`} companyId="demo" issueId="context-notices" />
+          <ExecutionBlockerNotice className={shellSectionClass} companyId="demo" issueId="context-notices" onRetried={() => {}}
             blocker={{ recoveryActionId: "demo-recovery", runId: null, agentId: null, cause: "action_outcome_unknown",
               nextAction: "Inspect the run before continuing. Recorded work is preserved." }} />
+          <div className={shellSectionClass}>
           <EmailMessageCard contextNotice issueId="context-notices" message={{
             id: "email-demo", providerMessageId: "email-demo", direction: "inbound",
             from: "operator@example.com", to: ["agent@example.com"], subject: "Card styling",
@@ -34,6 +37,7 @@ function TaskContextNotices() {
             fullText: "Please keep the connection and recovery cards consistent.",
             commentId: null, attachmentIds: [], timestamp: "2026-10-09T12:00:00Z", automatic: false,
           }} />
+          </div>
         </div>
       </main>
     </QueryClientProvider>