Bug fixes.

app.py

@@ -6159,22 +6159,22 @@ def fmt_conversation(messages, show_tips=True, show_rag_hl=True, show_pii_hl=Tru
         # visibility + opacity are delayed 0.7 s before hiding so the user has
         # time to move the mouse from the anchor into the popup.
         ".tt-popup{opacity:0;visibility:hidden;pointer-events:auto;"
-        "position:absolute;z-index:99999;background:#fff;color:#111;"
+        "position:fixed;z-index:99999;background:#fff;color:#111;"
         "border:2px solid #bbb;border-radius:10px;padding:10px 12px;width:max-content;"
         "max-width:min(500px,calc(100vw - 40px));box-shadow:0 8px 20px rgba(0,0,0,0.15);font-family:inherit;"
         "font-size:0.7em!important;line-height:1.25!important;text-align:left;"
-        "bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);"
+        "bottom:auto;left:0;top:0;transform:none;" 
         "transition:opacity 0s 0.15s,visibility 0s 0.15s;}"
 
         # Prevent tooltip from going beyond left edge
-        ".tt-popup{left:max(10px,min(50%,calc(100% - 10px)));transform:translateX(min(0px,max(-100%,calc(-50% - 10px))));}"
+        # ".tt-popup{left:max(10px,min(50%,calc(100% - 10px)));transform:translateX(min(0px,max(-100%,calc(-50% - 10px))));}"
 
         # Show immediately on anchor hover OR when mouse is on the popup itself.
         # Both paths are always reachable because pointer-events is never none.
         ".tt-anchor:hover .tt-popup,.tt-popup:hover{opacity:1;visibility:visible;transition:opacity 0s 0s,visibility 0s 0s;}"
 
         # Position below when near top
-        ".tt-anchor.near-top .tt-popup{bottom:auto;top:calc(100% + 8px);}"
+        # ".tt-anchor.near-top .tt-popup{bottom:auto;top:calc(100% + 8px);}"
 
         """
         /* Override Gradio theme variables */
@@ -6262,35 +6262,6 @@ def fmt_conversation(messages, show_tips=True, show_rag_hl=True, show_pii_hl=Tru
 
         "</style>"
 
-        # Minimal JavaScript for near-top detection
-        "<script>"
-        "document.addEventListener('DOMContentLoaded',function(){"
-        # near-top repositioning (unchanged)
-        "setInterval(function(){"
-        "document.querySelectorAll('.tt-anchor').forEach(function(el){"
-        "var rect=el.getBoundingClientRect();"
-        "if(rect.top<window.innerHeight*0.3){el.classList.add('near-top');}else{el.classList.remove('near-top');}"
-        "});},200);"
-        # Double-click to pin/unpin
-        "document.addEventListener('dblclick',function(e){"
-        "var anchor=e.target.closest('.tt-anchor');"
-        "if(anchor){"
-        "var popup=anchor.querySelector('.tt-popup');"
-        "if(!popup)return;"
-        "var pinned=anchor.classList.toggle('tt-pin-active');"
-        "popup.classList.toggle('tt-pinned',pinned);"
-        "e.preventDefault();"
-        "}});"
-        # Click anywhere outside a pinned tooltip to dismiss it
-        "document.addEventListener('click',function(e){"
-        "if(!e.target.closest('.tt-pin-active')){"
-        "document.querySelectorAll('.tt-anchor.tt-pin-active').forEach(function(a){"
-        "a.classList.remove('tt-pin-active');"
-        "a.querySelectorAll('.tt-popup').forEach(function(p){p.classList.remove('tt-pinned');});"
-        "});}"
-        "});"
-        "});"
-        "</script>"
     )
     h = [css, '<div class="chat-box">']
     for m in messages:
@@ -6568,7 +6539,7 @@ def create_ui(
 
 
             # CENTER: conversation
-            with gr.Column(scale=9):
+            with gr.Column(scale=8):
                 conversation_panel_title = "### 💬 Conversation"
                 if show_raghl_default:
                     conversation_panel_title += " | Hover highlighted text to see why it was flagged."
@@ -6591,7 +6562,7 @@ def create_ui(
 
             # RIGHT: risk panel
             right_col_needed = show_risk_default or show_pii_hl_default or (show_infr_default != 0)
-            with gr.Column(scale=2, visible=right_col_needed) as risk_col:
+            with gr.Column(scale=3, visible=right_col_needed) as risk_col:
                 risk_title = gr.Markdown("### 🛡️ Privacy Risk", visible=False)
                 risk_html = gr.HTML(create_risk_display(0), visible=False)
                 analysis_title = gr.Markdown("### 📝 Analysis", visible=False)
@@ -7204,7 +7175,7 @@ if __name__ == "__main__":
             color-scheme:light!important}
         .gradio-container{background:#fff!important}
         .dark .gradio-container{background:#fff!important}
-        .gradio-container,.gradio-container *{font-size:calc(1em + 0.01px)!important}
+        .gradio-container,.gradio-container *{font-size:calc(1em + 0px)!important}
         
         body, .gradio-container { padding-top:0!important; margin-top:0!important; }
         .main { padding-top:0!important; }
@@ -7219,7 +7190,7 @@ if __name__ == "__main__":
             border-color:#4A90D9!important;border-width:2.5px!important}
         button{border-width:2px!important;border-style:solid!important}
         .msg-ai{background:#f5f5f5;margin-right:18%;line-height:1.5;white-space:pre-wrap;}
-        .chat-box{padding-left: 200px;padding-top: 350px;padding-right: 200px;}
+        .chat-box{padding-left: 0px;padding-top: 0px;padding-right: 0px;}
         
         /* Corpus status box styling */
         #corpus_status, .corpus-status-box {
@@ -7231,33 +7202,66 @@ if __name__ == "__main__":
         }
         """
 
-    js="""
-        document.addEventListener('DOMContentLoaded',function(){
-        # near-top repositioning (unchanged)
-        setInterval(function(){
-        document.querySelectorAll('.tt-anchor').forEach(function(el){
-        var rect=el.getBoundingClientRect();
-        if(rect.top<window.innerHeight*0.3){el.classList.add('near-top');}else{el.classList.remove('near-top');}});},200);
-        # Double-click to pin/unpin
-        document.addEventListener('dblclick',function(e){
-        var anchor=e.target.closest('.tt-anchor');
-        if(anchor){
-        var popup=anchor.querySelector('.tt-popup');
-        if(!popup)return;"
-        var pinned=anchor.classList.toggle('tt-pin-active');
-        popup.classList.toggle('tt-pinned',pinned);
-        e.preventDefault();
-        }});
-        # Click anywhere outside a pinned tooltip to dismiss it
-        document.addEventListener('click',function(e){
-        if(!e.target.closest('.tt-pin-active')){
-        document.querySelectorAll('.tt-anchor.tt-pin-active').forEach(function(a){
-        a.classList.remove('tt-pin-active');
-        a.querySelectorAll('.tt-popup').forEach(function(p){p.classList.remove('tt-pinned');});
-        });}
+    js = """
+    <script>
+    (function() {
+      function attachTooltipListeners() {
+        /* Position popup on mouseenter — viewport-relative (position:fixed) */
+        document.addEventListener('mouseenter', function(e) {
+          var anchor = e.target.closest('.tt-anchor');
+          if (!anchor) return;
+          var rect = anchor.getBoundingClientRect();
+          var nearTop = rect.top < window.innerHeight * 0.3;
+          anchor.querySelectorAll('.tt-popup').forEach(function(p) {
+            var popW = Math.min(500, window.innerWidth - 40);
+            var idealLeft = rect.left + rect.width / 2 - popW / 2;  /* centered over anchor */
+            var overflowRight = (idealLeft + popW + 10) - window.innerWidth;  /* how many px overflow right edge */
+            var overflowLeft  = 10 - idealLeft;                               /* how many px overflow left edge */
+            var left = idealLeft - Math.max(0, overflowRight) + Math.max(0, overflowLeft);
+            p.style.left  = left + 'px';
+            p.style.width = popW + 'px';
+            if (nearTop) {
+              p.style.top       = (rect.bottom + 8) + 'px';
+              p.style.transform = 'none';
+            } else {
+              p.style.top       = (rect.top - 8) + 'px';
+              p.style.transform = 'translateY(-100%)';
+            }
+          });
+        }, true);
+
+        /* Double-click to pin/unpin */
+        document.addEventListener('dblclick', function(e) {
+          var anchor = e.target.closest('.tt-anchor');
+          if (!anchor) return;
+          var popup = anchor.querySelector('.tt-popup');
+          if (!popup) return;
+          var pinned = anchor.classList.toggle('tt-pin-active');
+          popup.classList.toggle('tt-pinned', pinned);
+          e.preventDefault();
         });
+
+        /* Click outside to dismiss pinned */
+        document.addEventListener('click', function(e) {
+          if (!e.target.closest('.tt-pin-active')) {
+            document.querySelectorAll('.tt-anchor.tt-pin-active').forEach(function(a) {
+              a.classList.remove('tt-pin-active');
+              a.querySelectorAll('.tt-popup').forEach(function(p) { p.classList.remove('tt-pinned'); });
+            });
+          }
         });
-        """
+      }
+
+      /* Gradio renders dynamically — poll until the app root exists, then attach */
+      var poll = setInterval(function() {
+        if (document.querySelector('.gradio-container')) {
+          clearInterval(poll);
+          attachTooltipListeners();
+        }
+      }, 100);
+    })();
+    </script>
+    """
 
     # Initialize LLM clients
     initialize_llm_clients()
@@ -7290,7 +7294,7 @@ if __name__ == "__main__":
     app.queue(max_size=100, default_concurrency_limit=10)  # required for concurrent multi-user support
     app.launch(
         css=css,
-        js=js,
+        head=js,
         server_name="0.0.0.0",  # Local only - change to "0.0.0.0" for network access
         server_port=int(args.port),  # Default 7860
         share=False,  # Keep this as False for local