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.