From 70a163fd18291e7ffd6e83e5092500ed0b3bd55d Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Fri, 14 Nov 2025 03:17:12 +0530
Subject: [PATCH] SimpleChatTCRV:CMPopOver:Relative positioning - P1

Use position fixed followed by using position-area so that one
can use anchor passed through showPopover.

Avoid the hidePopover from mouseLeave, because as the mouse moves
over the poped up popover ui, the mouseLeave will be called on
the chat message block/container. And that would have closed the
popover and inturn mouseEnter would have got called on ChatMsg,
given now with the popover hidden, the ChatMsg block is directly
accessible. So this leads to twinkling / toggling ie continues
show/hide of the popover.

Inturn in mouseEnter itself decide when to close the previous
popover (ie if the chatmessage id is different from what it was
before).
---
 tools/server/public_simplechat/simplechat.css |  7 ++++++-
 tools/server/public_simplechat/simplechat.js  | 11 +++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index ed94361ef0..195c01a016 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -93,7 +93,12 @@
     max-height: 20vmin;
 }
 #popover-chatmsg {
-    position:absolute;
+    position:fixed;
+    position-area: span-bottom center;
+    /*
+    inset-block-end: anchor(end)-;
+    inset-inline-end: anchor(self-start);
+    */
     background-color: transparent;
     padding: 0;
     border-width: 0;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 74d675eba7..42eb68b600 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -1211,17 +1211,16 @@ class MultiChatUI {
         secMain.classList.add(`role-${msg.ns.role}`)
         secMain.classList.add('chat-message')
         secMain.addEventListener('mouseenter', (ev)=>{
-            let trect = secMain.getBoundingClientRect();
-            let prect = this.elPopoverChatMsg.getBoundingClientRect();
-            this.elPopoverChatMsg.style.top = `${trect.top+2}px`
-            this.elPopoverChatMsg.style.left = `${((trect.width)*0.9) - prect.width}px`
+            console.log(`DBUG:MCUI:ChatMessageMEnter:${msg.uniqId}`)
+            if (this.uniqIdChatMsgPO != msg.uniqId) {
+                this.elPopoverChatMsg.hidePopover()
+            }
             this.uniqIdChatMsgPO = msg.uniqId
             // @ts-ignore
             this.elPopoverChatMsg.showPopover({source: secMain})
         })
         secMain.addEventListener('mouseleave', (ev)=>{
-            this.elPopoverChatMsg.hidePopover()
-            //this.uniqIdChatMsgPO = -1
+            console.log(`DBUG:MCUI:ChatMessageMLeave:${msg.uniqId}`)
         })
         elParent?.append(secMain)
         this.elLastChatMessage = secMain;