From 2d6cdd0a3c9cf3778bf1bca592f8b29b6b671290 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 4 Mar 2026 04:27:26 +0100
Subject: [PATCH] fix: relocate typing indicator into the input bubble

Move TypingIndicator from document flow (between MessageList and
MessageInput) into MessageInput's outer wrapper using absolute
bottom-full positioning. Fixes indicator being hidden behind the
floating glass input bubble on desktop.
---
 packages/web/src/components/chat/MessageInput.tsx    | 4 +++-
 packages/web/src/components/chat/TypingIndicator.tsx | 2 +-
 packages/web/src/components/layout/MainContent.tsx   | 3 ---
 packages/web/src/components/voice/VoiceChatPanel.tsx | 4 ----
 packages/web/src/styles/globals.css                  | 8 ++++++++
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/chat/MessageInput.tsx b/packages/web/src/components/chat/MessageInput.tsx
index e15dc7cb..7934ab95 100644
--- a/packages/web/src/components/chat/MessageInput.tsx
+++ b/packages/web/src/components/chat/MessageInput.tsx
@@ -3,6 +3,7 @@ import { useChatStore } from '../../stores/chatStore';
 import { isDmChannel, getChannelOrigin, getApiForOrigin, useServerStore } from '../../stores/serverStore';
 import { wsSend } from '../../hooks/useWebSocket';
 import { MentionPopover } from './MentionPopover';
+import { TypingIndicator } from './TypingIndicator';
 import type { MemberWithUser } from '@backspace/shared';
 
 interface MessageInputProps {
@@ -228,7 +229,8 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
   };
 
   return (
-    <div data-pip-obstacle="bottom" className="px-3 pb-3 flex-shrink-0 md:absolute md:bottom-3 md:left-3 md:right-3 md:z-[110] md:px-0 md:pb-0 md:glass-bubble md:rounded-[14px]">
+    <div data-pip-obstacle="bottom" className="relative px-3 pb-3 flex-shrink-0 md:absolute md:bottom-3 md:left-3 md:right-3 md:z-[110] md:px-0 md:pb-0 md:glass-bubble md:rounded-[14px]">
+      <TypingIndicator channelId={channelId} />
       {replyTo && (
         <div className="bg-interactive-hover rounded-t-lg px-4 py-2 flex items-center justify-between border-b border-white/[0.06]">
           <div className="flex items-center gap-1 text-[14px] text-txt-message truncate">
diff --git a/packages/web/src/components/chat/TypingIndicator.tsx b/packages/web/src/components/chat/TypingIndicator.tsx
index 6d1b1514..6cb343fd 100644
--- a/packages/web/src/components/chat/TypingIndicator.tsx
+++ b/packages/web/src/components/chat/TypingIndicator.tsx
@@ -30,7 +30,7 @@ export function TypingIndicator({ channelId }: TypingIndicatorProps) {
   }
 
   return (
-    <div className="h-[24px] px-4 flex items-center text-[12px] text-txt-primary font-medium select-none pointer-events-none">
+    <div className="absolute bottom-full left-1 md:left-4 mb-1 px-3 flex items-center text-[12px] text-txt-secondary font-medium select-none pointer-events-none animate-typing-in motion-reduce:animate-none">
       <div className="flex items-center gap-2">
         <div className="flex gap-[2px] bg-surface-elevated/20 rounded-full px-2 py-1">
           <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '0ms', animationDuration: '0.8s' }} />
diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx
index 205fa28b..a88aedf8 100644
--- a/packages/web/src/components/layout/MainContent.tsx
+++ b/packages/web/src/components/layout/MainContent.tsx
@@ -5,7 +5,6 @@ import { useUIStore } from '../../stores/uiStore';
 import { useAuthStore } from '../../stores/authStore';
 import { MessageList } from '../chat/MessageList';
 import { MessageInput } from '../chat/MessageInput';
-import { TypingIndicator } from '../chat/TypingIndicator';
 import { VoiceGrid } from '../voice/VoiceGrid';
 import { VoiceControlBar } from '../voice/VoiceControlBar';
 import { VoiceChatPanel } from '../voice/VoiceChatPanel';
@@ -210,7 +209,6 @@ export function MainContent() {
           </div>
         </div>
         <MessageList channelId={currentChannelId} />
-        <TypingIndicator channelId={currentChannelId} />
         <MessageInput channelId={currentChannelId} channelName={`@${dmName}`} />
       </div>
     );
@@ -357,7 +355,6 @@ export function MainContent() {
         </div>
       </div>
       <MessageList channelId={currentChannelId} />
-      <TypingIndicator channelId={currentChannelId} />
       <MessageInput channelId={currentChannelId} channelName={channel.name} />
     </div>
   );
diff --git a/packages/web/src/components/voice/VoiceChatPanel.tsx b/packages/web/src/components/voice/VoiceChatPanel.tsx
index 243b63f0..caf5d01d 100644
--- a/packages/web/src/components/voice/VoiceChatPanel.tsx
+++ b/packages/web/src/components/voice/VoiceChatPanel.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { MessageList } from '../chat/MessageList';
 import { MessageInput } from '../chat/MessageInput';
-import { TypingIndicator } from '../chat/TypingIndicator';
 import { useUIStore } from '../../stores/uiStore';
 
 interface VoiceChatPanelProps {
@@ -31,9 +30,6 @@ export function VoiceChatPanel({ channelId, channelName }: VoiceChatPanelProps)
       {/* Messages */}
       <MessageList channelId={channelId} />
 
-      {/* Typing indicator */}
-      <TypingIndicator channelId={channelId} />
-
       {/* Input */}
       <MessageInput channelId={channelId} channelName={channelName} />
     </div>
diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index b3909678..67e865a0 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -238,6 +238,14 @@
   animation: slideUp 0.15s ease-out;
 }
 
+@keyframes typingFadeIn {
+  from { transform: translateY(4px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+.animate-typing-in {
+  animation: typingFadeIn 0.15s ease-out;
+}
+
 @keyframes gradientPulse {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 1; }