From 9c674d91b70ec0542f854ea594cf952af9199e70 Mon Sep 17 00:00:00 2001
From: Mega Mind <146339422+M3gA-Mind@users.noreply.github.com>
Date: Tue, 23 Jun 2026 22:56:33 +0530
Subject: [PATCH] fix(intelligence): make workflow-run approval modal opaque
 (#3951)

---
 .../WorkflowRunApprovalCard.test.tsx            | 17 +++++++++++++++++
 .../intelligence/WorkflowRunApprovalCard.tsx    |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/src/components/intelligence/WorkflowRunApprovalCard.test.tsx b/app/src/components/intelligence/WorkflowRunApprovalCard.test.tsx
index 3534563e7..f06789d6b 100644
--- a/app/src/components/intelligence/WorkflowRunApprovalCard.test.tsx
+++ b/app/src/components/intelligence/WorkflowRunApprovalCard.test.tsx
@@ -78,6 +78,23 @@ describe('WorkflowRunApprovalCard', () => {
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 
+  it('uses an opaque warning surface so thread text does not show through (#3783)', () => {
+    render(
+      <WorkflowRunApprovalCard
+        definition={def()}
+        reasons={['high_children']}
+        onApprove={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    const card = screen.getByTestId('workflow-approval-card');
+    expect(card).toHaveClass('bg-amber-50');
+    expect(card).toHaveClass('dark:bg-amber-950');
+    // No fractional-opacity background that would let thread text bleed through.
+    expect(card.className).not.toMatch(/\bbg-[^\s/]+\/\d+/);
+    expect(card.className).not.toMatch(/\bdark:bg-[^\s/]+\/\d+/);
+  });
+
   it('disables both buttons and shows the starting label while a start is in flight', () => {
     render(
       <WorkflowRunApprovalCard
diff --git a/app/src/components/intelligence/WorkflowRunApprovalCard.tsx b/app/src/components/intelligence/WorkflowRunApprovalCard.tsx
index 9e8f9288a..195f58994 100644
--- a/app/src/components/intelligence/WorkflowRunApprovalCard.tsx
+++ b/app/src/components/intelligence/WorkflowRunApprovalCard.tsx
@@ -62,7 +62,7 @@ export const WorkflowRunApprovalCard: React.FC<Props> = ({
       role="alertdialog"
       aria-label={t('orchestration.approval.title')}
       data-testid="workflow-approval-card"
-      className="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm dark:border-amber-500/40 dark:bg-amber-500/10">
+      className="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm shadow-sm dark:border-amber-700 dark:bg-amber-950">
       <div className="flex items-start gap-2">
         <span aria-hidden className="text-base leading-none">
           ⚠️