From f02569b7d48786c2550ac50d39d86475f061fd0d Mon Sep 17 00:00:00 2001
From: Nick Beckley <nickbeckley5@gmail.com>
Date: Sun, 26 Jul 2026 11:32:49 +0000
Subject: [PATCH] Make Story Intelligence side panels fluid

---
 PlotLine.Tests/Program.cs                     |  3 ++
 ...tory-intelligence-experience-prototype.css | 30 ++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/PlotLine.Tests/Program.cs b/PlotLine.Tests/Program.cs
index 0c28629..2d164fb 100644
--- a/PlotLine.Tests/Program.cs
+++ b/PlotLine.Tests/Program.cs
@@ -1145,6 +1145,9 @@ static void Phase21RSceneBrowserAndPanelsAreReplayFriendly()
     Assert(script.Contains("if (!realMode || !snapshotUrl || state.terminal) return;", StringComparison.Ordinal), "Replay must not poll live snapshot endpoints.");
     Assert(css.Contains(".story-exp-replay-browser", StringComparison.Ordinal), "Replay browser styling was not found.");
     Assert(css.Contains("scrollbar-width: none", StringComparison.Ordinal), "Side-panel native scrollbar tracks should be suppressed.");
+    Assert(css.Contains(".story-exp-panel:has(.story-exp-insight-list:empty)", StringComparison.Ordinal), "Empty side panels should collapse instead of reserving large blank space.");
+    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(!css.Contains(".story-exp-insight-list {\n  display: grid;\n  gap: 9px;\n  min-height: 0;\n  overflow: auto", StringComparison.Ordinal), "Nested insight lists should not create native scrollbars.");
     Assert(progressViewModel.Contains("public int? ImportSessionID", StringComparison.Ordinal), "Import progress page should carry the import session for replay links.");
 }
diff --git a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
index be701c9..97c8381 100644
--- a/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
+++ b/PlotLine/wwwroot/css/story-intelligence-experience-prototype.css
@@ -339,7 +339,6 @@ input:focus-visible {
 .story-exp-left,
 .story-exp-right {
   display: grid;
-  align-content: start;
   gap: 9px;
   max-height: calc(100vh - 126px);
   min-height: 0;
@@ -355,11 +354,11 @@ input:focus-visible {
 }
 
 .story-exp-left {
-  grid-template-rows: auto auto minmax(170px, 1fr) minmax(96px, 0.56fr);
+  grid-template-rows: auto auto minmax(0, auto) minmax(0, auto);
 }
 
 .story-exp-right {
-  grid-template-rows: minmax(218px, 1.35fr) minmax(185px, 1.08fr) auto;
+  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto);
 }
 
 .story-exp-left,
@@ -386,11 +385,34 @@ input:focus-visible {
 
 .story-exp-panel {
   display: grid;
-  grid-template-rows: auto auto;
+  align-content: start;
+  grid-template-rows: auto minmax(0, auto);
   min-height: 0;
   overflow: hidden;
 }
 
+.story-exp-panel:has(.story-exp-list:empty),
+.story-exp-panel:has(.story-exp-feed:empty),
+.story-exp-panel:has(.story-exp-insight-list:empty) {
+  padding-bottom: 10px;
+}
+
+.story-exp-right .story-exp-panel:has(.story-exp-insight-list:not(:empty)) {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.story-exp-right .story-exp-panel:has(.story-exp-insight-list:not(:empty)):first-child {
+  min-height: clamp(104px, 17vh, 192px);
+}
+
+.story-exp-right .story-exp-panel:has(.story-exp-insight-list:not(:empty)):nth-child(2) {
+  min-height: clamp(170px, 28vh, 330px);
+}
+
+.story-exp-right .story-exp-panel:has(.story-exp-insight-list:not(:empty)):nth-child(3) {
+  min-height: clamp(78px, 13vh, 150px);
+}
+
 .story-exp-panel--compact {
   padding: 9px;
 }