From 24a050e3b5ee60253000862c10a5ee39c2fc78c5 Mon Sep 17 00:00:00 2001
From: Nick Beckley <nickbeckley5@gmail.com>
Date: Wed, 29 Jul 2026 19:31:32 +0000
Subject: [PATCH] Fix Story Intelligence presence callout bounds

---
 ...tory-intelligence-experience-prototype.css |  2 +-
 ...story-intelligence-experience-prototype.js | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
index de7992c..f62e7ff 100644
--- a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
+++ b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
@@ -796,7 +796,7 @@ input:focus-visible {
   position: absolute;
   left: var(--presence-left, 28px);
   top: var(--presence-top, 58px);
-  z-index: 78;
+  z-index: 34;
   width: var(--presence-width, 520px);
   height: var(--presence-height, 320px);
   border: 1px solid rgba(125, 193, 255, 0.2);
diff --git a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
index befd4e2..29ceba9 100644
--- a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
+++ b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
@@ -714,22 +714,32 @@
     }
 
     const rects = characterNodes
-      .map((node) => node.getBoundingClientRect())
+      .flatMap((node) => [
+        node.getBoundingClientRect(),
+        ...[...node.querySelectorAll(".story-character__image, .story-character__text")]
+          .map((part) => part.getBoundingClientRect())
+      ])
       .filter((rect) => rect.width > 0 && rect.height > 0);
     if (!rects.length) {
       callout.remove();
       return;
     }
 
-    const left = Math.min(...rects.map((rect) => rect.left)) - stageRect.left;
-    const top = Math.min(...rects.map((rect) => rect.top)) - stageRect.top;
-    const right = Math.max(...rects.map((rect) => rect.right)) - stageRect.left;
-    const bottom = Math.max(...rects.map((rect) => rect.bottom)) - stageRect.top;
-    const padding = Math.max(28, Math.min(54, stageRect.width * 0.035));
-    callout.style.setProperty("--presence-left", `${Math.max(12, left - padding)}px`);
-    callout.style.setProperty("--presence-top", `${Math.max(46, top - padding)}px`);
-    callout.style.setProperty("--presence-width", `${Math.min(stageRect.width * 0.72, right - left + padding * 2)}px`);
-    callout.style.setProperty("--presence-height", `${Math.min(stageRect.height * 0.82, bottom - top + padding * 2 + 62)}px`);
+    const contentLeft = Math.min(...rects.map((rect) => rect.left)) - stageRect.left;
+    const contentTop = Math.min(...rects.map((rect) => rect.top)) - stageRect.top;
+    const contentRight = Math.max(...rects.map((rect) => rect.right)) - stageRect.left;
+    const contentBottom = Math.max(...rects.map((rect) => rect.bottom)) - stageRect.top;
+    const paddingX = Math.max(46, Math.min(78, stageRect.width * 0.055));
+    const paddingY = Math.max(38, Math.min(70, stageRect.height * 0.085));
+    const maxRight = stageRect.width - 18;
+    const left = Math.max(12, contentLeft - paddingX);
+    const top = Math.max(38, contentTop - paddingY);
+    const right = Math.min(maxRight, Math.max(contentRight + paddingX, left + 320));
+    const bottom = Math.min(stageRect.height - 28, Math.max(contentBottom + paddingY, top + 230));
+    callout.style.setProperty("--presence-left", `${left}px`);
+    callout.style.setProperty("--presence-top", `${top}px`);
+    callout.style.setProperty("--presence-width", `${Math.max(300, right - left)}px`);
+    callout.style.setProperty("--presence-height", `${Math.max(210, bottom - top)}px`);
   }
 
   function drawConnection(id, start, end, tone, weight, label, index, obstacles, occupiedRects) {