From 470d4eb993eccd7d33cc9ad6f282c684d6760ac8 Mon Sep 17 00:00:00 2001
From: Carlos Rico-Ospina <carlosricojr@gmail.com>
Date: Thu, 6 Aug 2026 12:56:01 -0400
Subject: [PATCH] fix(mobile): stop thread messages reading through pending
 cards (#5450)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 apps/mobile/src/features/threads/PendingApprovalCard.tsx  | 4 +++-
 apps/mobile/src/features/threads/PendingUserInputCard.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/features/threads/PendingApprovalCard.tsx b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
index caf9bd4cd0cc381c1f096399dbfbe9723f86c95c..377ae82aba8b4629d11184c2fff7ac847cebb39a 100644
--- a/apps/mobile/src/features/threads/PendingApprovalCard.tsx
+++ b/apps/mobile/src/features/threads/PendingApprovalCard.tsx
@@ -14,8 +14,10 @@ export interface PendingApprovalCardProps {
 }
 
 export function PendingApprovalCard(props: PendingApprovalCardProps) {
+  // Opaque for the same reason as PendingUserInputCard: nothing blurs the feed
+  // behind this card, so a translucent surface bleeds messages through it.
   return (
-    <View className="gap-2.5 rounded-[20px] border border-neutral-200 bg-neutral-100/80 p-4 dark:border-white/6 dark:bg-neutral-900/80">
+    <View className="gap-2.5 rounded-[20px] border border-neutral-200 bg-neutral-100 p-4 dark:border-white/6 dark:bg-neutral-900">
       <Text className="font-t3-bold text-2xs uppercase tracking-[1.1px] text-sky-700 dark:text-sky-300">
         Approval needed
       </Text>
diff --git a/apps/mobile/src/features/threads/PendingUserInputCard.tsx b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
index 4d2c2c84159b49ad5cc7b9b186d1c7ea6385d606..c3c9b4e7ce8313b747b724238d859278509c33ad 100644
--- a/apps/mobile/src/features/threads/PendingUserInputCard.tsx
+++ b/apps/mobile/src/features/threads/PendingUserInputCard.tsx
@@ -24,8 +24,11 @@ export interface PendingUserInputCardProps {
 }
 
 export function PendingUserInputCard(props: PendingUserInputCardProps) {
+  // The surface is opaque on purpose: the card floats over the thread feed
+  // with no blur behind it, so a translucent background renders the questions
+  // on top of whatever message happens to sit underneath.
   return (
-    <View className="gap-2.5 rounded-[20px] border border-neutral-200 bg-neutral-100/80 p-4 dark:border-white/6 dark:bg-neutral-900/80">
+    <View className="gap-2.5 rounded-[20px] border border-neutral-200 bg-neutral-100 p-4 dark:border-white/6 dark:bg-neutral-900">
       <Text className="font-t3-bold text-2xs uppercase tracking-[1.1px] text-sky-700 dark:text-sky-300">
         User input needed
       </Text>
-- 
2.54.0