From 6e436db5e709d944ebffed6936ea1f8e4bd2e19e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 18 Oct 2025 09:20:22 -0500
Subject: [PATCH] fix(complement-race): improve AI speech bubble positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Speech bubbles now:
- Position 15px above AI racers instead of directly over them
- Use zIndex 20 to appear above all racers (player: 10, AI: 5)

This fixes two UX issues:
1. Bubbles were covering AI racer emojis, making them invisible
2. Bubbles appeared under player avatar when racers were close

Applied to both LinearTrack (practice) and CircularTrack (survival)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../complement-race/components/RaceTrack/CircularTrack.tsx  | 6 +++++-
 .../complement-race/components/RaceTrack/LinearTrack.tsx    | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
index 54d61876..ec5cc864 100644
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
@@ -401,7 +401,11 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
             {activeBubble && (
               <div
                 style={{
-                  transform: `rotate(${-aiPos.angle}deg)`, // Counter-rotate bubble
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
+                  transform: `translate(-50%, -15px) rotate(${-aiPos.angle}deg)`, // Offset 15px above, counter-rotate bubble
+                  zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
index ddee664d..1ac2862c 100644
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
@@ -144,7 +144,11 @@ export function LinearTrack({
             {activeBubble && (
               <div
                 style={{
-                  transform: 'scaleX(-1)', // Counter-flip bubble to make text readable
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
+                  transform: 'translate(-50%, -15px) scaleX(-1)', // Offset 15px above, counter-flip bubble
+                  zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble