From 9a20e03870bcad4e94051684d1d94bce8d774444 Mon Sep 17 00:00:00 2001
From: NigeParis <nrobinso@student.42.fr>
Date: Wed, 14 Jan 2026 18:17:48 +0100
Subject: [PATCH] css et java repair on popup message

---
 frontend/src/chat/chat.html                               | 4 ++--
 frontend/src/chat/chatHelperFunctions/openMessagePopup.ts | 5 +++--
 frontend/src/chat/chatHelperFunctions/openProfilePopup.ts | 4 ++--
 frontend/src/pages/pong/pong.html                         | 6 +++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/chat/chat.html b/frontend/src/chat/chat.html
index 35c127c..640775f 100644
--- a/frontend/src/chat/chat.html
+++ b/frontend/src/chat/chat.html
@@ -37,12 +37,12 @@
             </div>
           </div>
           <div id="game-modal" class="gamePopup hidden">
-            <div class="popUpMessage">
+            <div id="popUpMessage"class="popUpMessage overflow-y-auto">
               <div id="game-info">
                 <p class="" id="modal-message"></p>
-                <button id="close-modal-message" class="btn-style relative bottom-8 left-85">Close</button>
               </div>
             </div>
+            <button id="close-modal-message" class="btn-style absolute bottom-55 right-10">Close</button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/chat/chatHelperFunctions/openMessagePopup.ts b/frontend/src/chat/chatHelperFunctions/openMessagePopup.ts
index 1edde00..8af1118 100644
--- a/frontend/src/chat/chatHelperFunctions/openMessagePopup.ts
+++ b/frontend/src/chat/chatHelperFunctions/openMessagePopup.ts
@@ -12,9 +12,10 @@ export async function openMessagePopup(message: string) {
 	const obj =  message;
 	if (modalmessage) {
 		const messageElement = document.createElement("div");
-		messageElement.innerHTML = `<div id="profile-about">${message}</div>`;
+		messageElement.innerHTML = `<div id="profile-about" class="text-lg">${message}</div>`;
 		modalmessage.appendChild(messageElement);
-		modalmessage.scrollTop = modalmessage.scrollHeight;
+		modalmessage.lastElementChild?.scrollIntoView({ block: "end" });
+
 	}
 	const gameMessage = document.getElementById("game-modal") ?? null;
 	if (gameMessage) {
diff --git a/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts b/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts
index 4f3a255..fcef7e9 100644
--- a/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts
+++ b/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts
@@ -14,8 +14,8 @@ export async function openProfilePopup(profil: ClientProfil) {
     			<button id="popup-b-invite" class="btn-style popup-b-invite">U Game ?</button>
     			<button id="popup-b-block" class="btn-style popup-b-block">Block User</button>
 				<div id="profile-about" class="text-2xl">About: <span class="recessed">${profil.text}</span> </div>
-				<button id="popup-b-hGame" class="btn-style-games popup-b-game">Your Pong Games</button>
-				<button id="popup-b-hTGame" class="btn-style-games popup-b-TTTgame">My TTT Games</button>
+				<button id="popup-b-hGame" class="btn-style-games popup-b-game">View Pong Games</button>
+				<button id="popup-b-hTGame" class="btn-style-games popup-b-TTTgame">View TTT Games</button>
 
     		</div>
     	`;
diff --git a/frontend/src/pages/pong/pong.html b/frontend/src/pages/pong/pong.html
index 271a854..e879acd 100644
--- a/frontend/src/pages/pong/pong.html
+++ b/frontend/src/pages/pong/pong.html
@@ -2,11 +2,11 @@
 	<div id="mainbox" class="game-mainBoxDisplay rounded-elem">
 		<div class="grid grid-cols-3">
 			<div class="flex flex-col gap-2">
-				<button id="QueueBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Queue
+				<button id="QueueBtn" class="fit-all dflt-btn-style gray-color rounded-elem blue-hover">Queue
 					Up</button>
-				<button id="LocalBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">Local
+				<button id="LocalBtn" class="fit-all dflt-btn-style gray-color rounded-elem blue-hover">Local
 					Game</button>
-				<button id="TourBtn" class="fit-all pong-btn-style gray-color rounded-elem blue-hover">
+				<button id="TourBtn" class="fit-all dflt-btn-style gray-color rounded-elem blue-hover">
 					<span class="mx-2">Create Tournament</span>
 				</button>
 				<!-- tournament hdl -->