From 56a287a85db9e805f7e95beab9d1f0872a77a1a9 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 22 Dec 2025 03:37:17 +0000
Subject: [PATCH] fix: tool call bottom sheet text visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace react-native-gesture-handler ScrollView with React Native's
built-in ScrollView to fix text rendering issues inside @gorhom/bottom-sheet.
The gesture handler's ScrollView was causing text to render nearly invisible.

Also add explicit background colors to scroll containers for consistent
appearance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/app/src/components/tool-call-sheet.tsx | 5 +++--
 plan.md                                         | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/tool-call-sheet.tsx b/packages/app/src/components/tool-call-sheet.tsx
index f41503ecb..5849353b6 100644
--- a/packages/app/src/components/tool-call-sheet.tsx
+++ b/packages/app/src/components/tool-call-sheet.tsx
@@ -6,8 +6,7 @@ import React, {
   useRef,
   ReactNode,
 } from "react";
-import { View, Text, Pressable } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
+import { View, Text, Pressable, ScrollView } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import {
   BottomSheetModal,
@@ -681,6 +680,7 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.border,
     borderRadius: theme.borderRadius.base,
     maxHeight: 260,
+    backgroundColor: theme.colors.card,
   },
   scrollContent: {
     padding: theme.spacing[2],
@@ -695,6 +695,7 @@ const styles = StyleSheet.create((theme) => ({
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.border,
     borderRadius: theme.borderRadius.base,
+    backgroundColor: theme.colors.card,
   },
   jsonScrollError: {
     borderColor: theme.colors.destructive,
diff --git a/plan.md b/plan.md
index d1cbe49cb..844593751 100644
--- a/plan.md
+++ b/plan.md
@@ -777,13 +777,14 @@ interface ToolCallSheetData {
     Screenshots saved: `tool-call-bottom-sheet.png`, `tool-call-mcp-bottom-sheet.png` in `.playwright-mcp/` directory.
     **Root cause**: The result text in `ToolCallSheet` component likely uses a color with poor contrast against the dark bottom sheet background. Fix task already exists below.
 
-- [ ] **Fix**: Fix tool call bottom sheet contrast issue.
+- [x] **Fix**: Fix tool call bottom sheet contrast issue.
 
   - The bottom sheet content is rendering white text on white background
   - Check `ToolCallSheet` component styles for text color
   - Ensure text color adapts to light/dark mode properly
   - Check if theme colors are being applied correctly
   - Run typecheck after fix
+  - **Done (2025-12-22 15:30)**: Fixed by replacing `react-native-gesture-handler`'s ScrollView with React Native's built-in ScrollView in `tool-call-sheet.tsx`. The gesture handler's ScrollView was causing text rendering issues inside `@gorhom/bottom-sheet`. Also added `backgroundColor: theme.colors.card` to `scrollArea` and `jsonScroll` styles for consistent background. Verified via Playwright MCP - JSON content now clearly visible with proper contrast. Typecheck passes.
 
 - [ ] **Test**: Re-verify tool call bottom sheet is readable after fix.