From 45ac1021571d9439df5fc3862eedb5bf44b08eb4 Mon Sep 17 00:00:00 2001 From: Sergei Date: Sat, 24 Jan 2026 20:55:35 -0800 Subject: [PATCH] fix: Prevent FloatingCallBubble from overlapping tab bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Account for tab bar height (60px) when calculating maximum Y position for the draggable bubble. Previously the bubble could be dragged over the tab bar navigation, now it stays above it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- components/FloatingCallBubble.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/FloatingCallBubble.tsx b/components/FloatingCallBubble.tsx index 8323532..4137144 100644 --- a/components/FloatingCallBubble.tsx +++ b/components/FloatingCallBubble.tsx @@ -21,6 +21,7 @@ import { AppColors, FontSizes, Spacing } from '@/constants/theme'; import { useVoiceCall } from '@/contexts/VoiceCallContext'; const BUBBLE_SIZE = 70; +const TAB_BAR_HEIGHT = 60; // Tab bar content height (without safe area) const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window'); export function FloatingCallBubble() { @@ -117,8 +118,9 @@ export function FloatingCallBubble() { const targetX = snapToLeft ? 16 : SCREEN_WIDTH - BUBBLE_SIZE - 16; // Clamp Y within screen bounds + // Account for tab bar height + safe area to avoid overlapping navigation const minY = insets.top + 16; - const maxY = SCREEN_HEIGHT - BUBBLE_SIZE - insets.bottom - 100; + const maxY = SCREEN_HEIGHT - BUBBLE_SIZE - insets.bottom - TAB_BAR_HEIGHT - 16; const targetY = Math.max(minY, Math.min(currentY, maxY)); Animated.spring(pan, {