jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tool call bottom sheet text visibility

Browse Source 
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>
This commit is contained in:
Mohamed Boudra
2025-12-22 03:37:17 +00:00
co-authored by Claude Opus 4.5
parent 7f3ba3f5ce
commit 56a287a85d
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/tool-call-sheet.tsx
+3 -2
View File
@@ -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,
plan.md
+2 -1
View File
@@ -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.