diff --git a/frontend/components/messenger/ChatPanel.tsx b/frontend/components/messenger/ChatPanel.tsx index 784f6561..8b7543ec 100644 --- a/frontend/components/messenger/ChatPanel.tsx +++ b/frontend/components/messenger/ChatPanel.tsx @@ -16,7 +16,7 @@ interface ChatPanelProps { export function ChatPanel({ room }: ChatPanelProps) { const { user } = useAuth(); - const { selectedRoomId } = useMessengerContext(); + const { selectedRoomId, isOpen } = useMessengerContext(); const { data: messages } = useMessages(selectedRoomId); const markAsRead = useMarkAsRead(); const updateRoom = useUpdateRoom(); @@ -38,14 +38,15 @@ export function ChatPanel({ room }: ChatPanelProps) { // Scroll to bottom: sentinel scrollIntoView before paint (no visible jump) useLayoutEffect(() => { - bottomRef.current?.scrollIntoView(); - }, [selectedRoomId, lastMessageId]); + if (isOpen) bottomRef.current?.scrollIntoView(); + }, [selectedRoomId, lastMessageId, isOpen]); // Second pass for async image loads useEffect(() => { + if (!isOpen) return; const t = setTimeout(() => { bottomRef.current?.scrollIntoView(); }, 600); return () => clearTimeout(t); - }, [lastMessageId, selectedRoomId]); + }, [lastMessageId, selectedRoomId, isOpen]); // Re-attach scroll listener whenever room changes (scrollRef mounts after room is set) useEffect(() => {