From 6f4d47848c2c9cbbdf4bd892c8c9c8c6be9b6660 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Fri, 24 Oct 2025 11:25:12 +0200 Subject: [PATCH] fix: use absolute positioning for hidden AgentInputArea to prevent layout space MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AgentInputArea was still taking up 88px height when opacity was 0, creating a gap between status bar and realtime controls. Now switches to position absolute when hidden (opacity < 0.5) to remove from layout flow completely. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- packages/app/src/components/agent-input-area.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/app/src/components/agent-input-area.tsx b/packages/app/src/components/agent-input-area.tsx index aab38637f..d0236c850 100644 --- a/packages/app/src/components/agent-input-area.tsx +++ b/packages/app/src/components/agent-input-area.tsx @@ -36,6 +36,8 @@ export function AgentInputArea({ agentId, isRealtimeMode }: AgentInputAreaProps) const animatedStyle = useAnimatedStyle(() => { return { opacity: opacity.value, + // When hidden, use absolute positioning to remove from layout flow + position: opacity.value < 0.5 ? ("absolute" as const) : ("relative" as const), // When hidden, disable pointer events so GlobalFooter's controls are interactive pointerEvents: opacity.value < 0.5 ? ("none" as const) : ("auto" as const), };