From d271cc215b658aaff93286532f1a3f71e8fdb8f6 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Thu, 29 Jan 2026 15:57:25 +0100
Subject: [PATCH] feat: improve message scrolling and enhance conversation
 header UX

- Fixed auto-scrolling to the latest message by targeting the correct scroll container.
- Updated the conversation header to include a clickable link to the recipient's profile.
---
 .../src/app/(dashboard)/messages/page.tsx     | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/(dashboard)/messages/page.tsx b/frontend/src/app/(dashboard)/messages/page.tsx
index 60c2106..1dddb51 100644
--- a/frontend/src/app/(dashboard)/messages/page.tsx
+++ b/frontend/src/app/(dashboard)/messages/page.tsx
@@ -151,7 +151,12 @@ export default function MessagesPage() {
 
 	React.useEffect(() => {
 		if (scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			const scrollContainer = scrollRef.current.querySelector(
+				"[data-slot='scroll-area-viewport']",
+			);
+			if (scrollContainer) {
+				scrollContainer.scrollTop = scrollContainer.scrollHeight;
+			}
 		}
 	}, []);
 
@@ -334,19 +339,24 @@ export default function MessagesPage() {
 				{activeConv ? (
 					<>
 						{/* Header */}
-						<div className="p-4 border-b flex items-center gap-3">
-							<Avatar className="h-8 w-8">
-								<AvatarImage src={activeConv.recipient.avatarUrl} />
-								<AvatarFallback>
-									{activeConv.recipient.username[0].toUpperCase()}
-								</AvatarFallback>
-							</Avatar>
-							<div>
-								<h3 className="font-bold leading-none">
-									{activeConv.recipient.displayName || activeConv.recipient.username}
-								</h3>
-								<span className="text-xs text-green-500 font-medium">En ligne</span>
-							</div>
+						<div className="p-4 border-b flex items-center justify-between">
+							<Link
+								href={`/user/${activeConv.recipient.username}`}
+								className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+							>
+								<Avatar className="h-8 w-8">
+									<AvatarImage src={activeConv.recipient.avatarUrl} />
+									<AvatarFallback>
+										{activeConv.recipient.username[0].toUpperCase()}
+									</AvatarFallback>
+								</Avatar>
+								<div>
+									<h3 className="font-bold leading-none">
+										{activeConv.recipient.displayName || activeConv.recipient.username}
+									</h3>
+									<span className="text-xs text-green-500 font-medium">En ligne</span>
+								</div>
+							</Link>
 						</div>
 
 						{/* Messages */}