PlotDirector Phase 18A - Dashboard Layout and Density Refinement

PlotLine/Views/Scenes/Edit.cshtml

@@ -2,6 +2,7 @@
 @{
     ViewData["Title"] = Model.SceneID == 0 ? "New Scene" : "Edit Scene";
     ViewData["ProjectSection"] = "Overview";
+    ViewData["ShellClass"] = "plotline-shell-wide";
 }
 
 <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@@ -26,7 +27,7 @@
     <partial name="_ProjectSectionNav" model="Model.Project" />
 }
 
-<div class="page-heading compact">
+<div class="page-heading scene-edit-heading">
     <div>
         <p class="eyebrow">@Model.Book?.BookTitle / Chapter @Model.Chapter?.ChapterNumber</p>
         <h1>@ViewData["Title"] <help-icon key="scenes.edit" /></h1>

PlotLine/Views/Shared/SceneInspectorV2/_SceneInspectorEditPage.cshtml

@@ -2,8 +2,6 @@
 
 <div class="scene-inspector-v2 scene-inspector-v2-edit" data-scene-inspector-v2 data-scene-id="@Model.SceneID">
     <div class="scene-inspector-v2-summary-pane">
-        <partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorHealthStrip.cshtml" model="Model" />
-
         <div class="scene-inspector-v2-grid">
             <partial name="~/Views/Shared/SceneInspectorV2/_SceneOverviewCard.cshtml" model="Model" />
             <partial name="~/Views/Shared/SceneInspectorV2/_SceneStoryCard.cshtml" model="Model" />

PlotLine/Views/Shared/SceneInspectorV2/_SceneOverviewCard.cshtml

@@ -17,42 +17,41 @@
 }
 
 <article class="scene-inspector-v2-card scene-overview-v2-card" data-scene-summary-part="overview">
-    <div class="scene-inspector-v2-card-header">
+    <div class="scene-inspector-v2-card-header scene-overview-v2-header">
         <div>
             <p class="eyebrow">Overview</p>
             <h3>@(string.IsNullOrWhiteSpace(Model.SceneTitle) ? "Untitled scene" : Model.SceneTitle)</h3>
         </div>
+        <div class="scene-overview-v2-controls">
+            <span class="status-pill">@status</span>
             <button type="button" class="btn btn-sm btn-outline-primary" data-scene-editor="scene-details" data-scene-id="@Model.SceneID" data-scene-editor-url="@Url.Action("SceneDetailsEditor", "Scenes", new { sceneId = Model.SceneID })">Manage scene details</button>
         </div>
+    </div>
 
-    <dl class="scene-inspector-v2-facts">
+    <dl class="scene-inspector-v2-facts scene-overview-v2-facts">
         <div>
-            <dt>Position</dt>
-            <dd>Chapter @Model.Chapter?.ChapterNumber, Scene @Model.SceneNumber</dd>
-        </div>
-        <div>
-            <dt>Revision status</dt>
-            <dd>@status</dd>
-        </div>
-        <div>
-            <dt>POV character</dt>
+            <dt>POV</dt>
             <dd>@pov</dd>
         </div>
-        <div>
-            <dt>Scene type</dt>
-            <dd>@sceneType</dd>
-        </div>
         <div>
             <dt>Date/time</dt>
             <dd>@timeLabel</dd>
         </div>
         <div>
-            <dt>Primary location</dt>
+            <dt>Location</dt>
             <dd>@primaryLocation</dd>
         </div>
+        <div>
+            <dt>Scene type</dt>
+            <dd>@sceneType</dd>
+        </div>
+        <div>
+            <dt>Position</dt>
+            <dd>Chapter @Model.Chapter?.ChapterNumber, Scene @Model.SceneNumber</dd>
+        </div>
     </dl>
 
-    <div class="scene-inspector-v2-summary">
+    <div class="scene-inspector-v2-summary scene-overview-v2-summary">
         <span>Synopsis</span>
         @if (string.IsNullOrWhiteSpace(Model.Summary))
         {

PlotLine/wwwroot/css/site.css

@@ -4494,22 +4494,22 @@ body.dragging-location [data-drag-type="location"] {
 }
 
 .scene-inspector-v2-edit {
-  --scene-editor-width: 480px;
-  padding-bottom: 24px;
+  --scene-editor-width: 520px;
+  padding-bottom: 16px;
 }
 
 .scene-inspector-v2-edit.editor-overlay-open {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 10px minmax(360px, min(var(--scene-editor-width), 50%));
+  grid-template-columns: minmax(0, 1fr) 10px minmax(400px, min(var(--scene-editor-width), 46%));
   align-items: stretch;
   gap: 12px;
-  height: clamp(420px, calc(100vh - 280px), 760px);
+  height: clamp(480px, calc(100vh - 240px), 820px);
   min-height: 0;
 }
 
 .scene-inspector-v2-summary-pane {
   display: grid;
-  gap: 14px;
+  gap: 12px;
   min-width: 0;
 }
 
@@ -4519,6 +4519,10 @@ body.dragging-location [data-drag-type="location"] {
   padding-right: 2px;
 }
 
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-v2-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .scene-inspector-v2-timeline {
   min-height: 100%;
 }
@@ -4535,6 +4539,12 @@ body.dragging-location [data-drag-type="location"] {
   gap: 14px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-grid {
+  align-items: start;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
 .scene-inspector-v2-stack {
   display: grid;
   gap: 12px;
@@ -4594,6 +4604,11 @@ body.dragging-location [data-drag-type="location"] {
   padding: 16px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-card {
+  gap: 10px;
+  padding: 14px;
+}
+
 .scene-inspector-v2-card-header {
   display: flex;
   align-items: flex-start;
@@ -4607,6 +4622,14 @@ body.dragging-location [data-drag-type="location"] {
   line-height: 1.25;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-card-header {
+  gap: 10px;
+}
+
+.scene-inspector-v2-edit .scene-inspector-v2-card-header h3 {
+  font-size: 1rem;
+}
+
 .scene-inspector-v2-card p {
   margin: 0;
 }
@@ -4633,6 +4656,11 @@ body.dragging-location [data-drag-type="location"] {
   gap: 6px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-summary,
+.scene-inspector-v2-edit .scene-inspector-v2-section {
+  gap: 5px;
+}
+
 .scene-inspector-v2-chip-row,
 .scene-inspector-v2-actions {
   display: flex;
@@ -4640,6 +4668,14 @@ body.dragging-location [data-drag-type="location"] {
   gap: 7px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-actions {
+  gap: 6px;
+}
+
+.scene-inspector-v2-edit .scene-inspector-v2-actions .btn {
+  padding: 0.22rem 0.5rem;
+}
+
 .scene-inspector-v2-chip-row span {
   border: 1px solid rgba(47, 111, 99, 0.18);
   border-radius: 999px;
@@ -4666,6 +4702,11 @@ body.dragging-location [data-drag-type="location"] {
   padding: 9px 10px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-metrics div,
+.scene-inspector-v2-edit .scene-inspector-v2-counts div {
+  padding: 7px 8px;
+}
+
 .scene-inspector-v2-metrics span {
   display: block;
   overflow: hidden;
@@ -4690,6 +4731,10 @@ body.dragging-location [data-drag-type="location"] {
   list-style: none;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-list {
+  gap: 5px;
+}
+
 .scene-inspector-v2-list li {
   display: flex;
   align-items: baseline;
@@ -4699,6 +4744,10 @@ body.dragging-location [data-drag-type="location"] {
   padding-bottom: 6px;
 }
 
+.scene-inspector-v2-edit .scene-inspector-v2-list li {
+  padding-bottom: 5px;
+}
+
 .scene-inspector-v2-list li:last-child {
   border-bottom: 0;
   padding-bottom: 0;
@@ -4717,6 +4766,35 @@ body.dragging-location [data-drag-type="location"] {
   padding: 10px 12px;
 }
 
+.scene-overview-v2-header {
+  align-items: flex-start;
+}
+
+.scene-overview-v2-controls {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.scene-overview-v2-facts {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 10px;
+}
+
+.scene-overview-v2-facts div:nth-child(3),
+.scene-overview-v2-summary {
+  grid-column: 1 / -1;
+}
+
+.scene-overview-v2-summary p {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
 .scene-inspector-editor-overlay {
   position: absolute;
   inset: 0;
@@ -5331,6 +5409,12 @@ body.scene-inspector-editor-resizing {
   }
 }
 
+@media (max-width: 1180px) {
+  .scene-inspector-v2-edit .scene-inspector-v2-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 720px) {
   .scene-inspector-v2-grid,
   .scene-inspector-v2-health,