From 35c56d2c2c86ce209bb96e9903b208f220a6570c Mon Sep 17 00:00:00 2001
From: Nick Beckley <nickbeckley5@gmail.com>
Date: Sun, 26 Jul 2026 16:09:39 +0000
Subject: [PATCH] Give story characters more stage space

---
 PlotLine.Tests/Program.cs                     |  5 +++--
 ...tory-intelligence-experience-prototype.css |  2 +-
 ...story-intelligence-experience-prototype.js | 20 ++++++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/PlotLine.Tests/Program.cs b/PlotLine.Tests/Program.cs
index 0488dc0..42de43a 100644
--- a/PlotLine.Tests/Program.cs
+++ b/PlotLine.Tests/Program.cs
@@ -1189,8 +1189,9 @@ static void Phase21RSceneBrowserAndPanelsAreReplayFriendly()
     Assert(css.Contains("--story-side-body-font-size: 0.72rem;", StringComparison.Ordinal), "Left and right side panels should share body text sizing.");
     Assert(!view.Contains("data-assets", StringComparison.Ordinal), "Asset visualisation lane should not be rendered on the main stage.");
     Assert(script.Contains("Assets are recorded in insights/diagnostics but not rendered as stage nodes.", StringComparison.Ordinal), "Asset data should remain available without drawing asset stage nodes.");
-    Assert(script.Contains("width * 0.76 - size / 2", StringComparison.Ordinal), "Location should use the former asset space once asset nodes are removed.");
-    Assert(css.Contains(".story-exp-zone--location .story-exp-zone-label {\n  left: 73%;", StringComparison.Ordinal), "Location lane label should follow the rebalanced stage.");
+    Assert(script.Contains("width * 0.84 - size / 2", StringComparison.Ordinal), "Location should be a compact right-side anchor once asset nodes are removed.");
+    Assert(script.Contains("{ x: 0.52, y: 0.66, role: \"context\" }", StringComparison.Ordinal), "Character layout should use more of the stage width.");
+    Assert(css.Contains(".story-exp-zone--location .story-exp-zone-label {\n  left: 80%;", StringComparison.Ordinal), "Location lane label should follow the compact right-side anchor.");
     Assert(!css.Contains("grid-template-rows: minmax(218px, 1.35fr) minmax(185px, 1.08fr) auto", StringComparison.Ordinal), "Right rail must not use fixed-height panel tracks.");
     Assert(!css.Contains("grid-template-rows: auto auto minmax(170px, 1fr) minmax(96px, 0.56fr)", StringComparison.Ordinal), "Left rail must not use fixed-height panel tracks.");
     Assert(script.Contains("shouldUseCharacterPortrait", StringComparison.Ordinal), "Characters should use evidence cards until portrait evidence is strong enough.");
diff --git a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
index 4b7fa1e..922a510 100644
--- a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
+++ b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
@@ -777,7 +777,7 @@ input:focus-visible {
 }
 
 .story-exp-zone--location .story-exp-zone-label {
-  left: 73%;
+  left: 80%;
   top: 22px;
 }
 
diff --git a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
index 465ef8f..d4c8f8c 100644
--- a/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
+++ b/PlotLine/wwwroot/js/story-intelligence-experience-prototype.js
@@ -808,10 +808,10 @@
     const others = characters
       .filter((character) => character.id !== pov?.id)
       .sort((a, b) => b.weight - a.weight);
-    const povSize = Math.round(Math.min(198, Math.max(154, width * 0.155)));
+    const povSize = Math.round(Math.min(188, Math.max(150, width * 0.145)));
     if (pov) {
       positions.set(pov.id, {
-        x: clamp(Math.round(width * 0.24 - povSize / 2), 28, width * 0.44 - povSize),
+        x: clamp(Math.round(width * 0.25 - povSize / 2), 28, width * 0.52 - povSize),
         y: clamp(Math.round(height * 0.28 - povSize / 2), 54, height * 0.54 - povSize),
         size: povSize,
         scale: 1,
@@ -823,11 +823,13 @@
     }
 
     const slots = [
-      { x: 0.41, y: 0.48, role: "partner" },
-      { x: 0.12, y: 0.55, role: "support" },
-      { x: 0.11, y: 0.19, role: "support" },
-      { x: 0.33, y: 0.70, role: "context" },
-      { x: 0.05, y: 0.36, role: "context" }
+      { x: 0.48, y: 0.46, role: "partner" },
+      { x: 0.12, y: 0.58, role: "support" },
+      { x: 0.12, y: 0.18, role: "support" },
+      { x: 0.36, y: 0.72, role: "context" },
+      { x: 0.28, y: 0.46, role: "context" },
+      { x: 0.52, y: 0.66, role: "context" },
+      { x: 0.06, y: 0.38, role: "context" }
     ];
     const placed = [...positions.values()];
     others.forEach((character, index) => {
@@ -905,9 +907,9 @@
     const bounds = dom.visualStage?.getBoundingClientRect();
     const width = Math.max(820, bounds?.width || 1040);
     const height = Math.max(500, bounds?.height || 560);
-    const size = Math.min(220, Math.max(176, width * 0.18));
+    const size = Math.min(188, Math.max(154, width * 0.14));
     return {
-      x: Math.round(width * 0.76 - size / 2),
+      x: Math.round(width * 0.84 - size / 2),
       y: Math.round(height * 0.46 - size / 2),
       size
     };