PlotDirector Phase 18B Follow-up - Fix Metrics Bars and Avatar Initial Alignment

PlotLine/Views/Shared/SceneInspectorV2/_SceneStoryCard.cshtml

@@ -63,13 +63,23 @@
             <div class="scene-inspector-v2-metrics">
                 @foreach (var metric in Model.Metrics)
                 {
-                    var range = Math.Max(1, metric.MaxValue - metric.MinValue);
-                    var clampedValue = Math.Min(metric.MaxValue, Math.Max(metric.MinValue, metric.Value));
-                    var percent = (int)Math.Round(((double)(clampedValue - metric.MinValue) / range) * 100);
-                    <div class="scene-inspector-v2-metric-bar" style="--metric-percent: @percent%;" aria-label="@metric.MetricName value @metric.Value of @metric.MaxValue">
-                        <span>@metric.MetricName</span>
-                        <div aria-hidden="true"><i></i></div>
-                        <strong>@metric.Value</strong>
+                    var effectiveMin = metric.MaxValue > metric.MinValue ? metric.MinValue : 0;
+                    var effectiveMax = metric.MaxValue > metric.MinValue ? metric.MaxValue : 10;
+                    var clampedValue = Math.Min(effectiveMax, Math.Max(effectiveMin, metric.Value));
+                    var percent = effectiveMax == 0 ? 0 : (int)Math.Round(((double)clampedValue / effectiveMax) * 100);
+                    <div class="scene-inspector-v2-metric-bar" style="--metric-percent: @percent%;">
+                        <div class="scene-inspector-v2-metric-bar-heading">
+                            <span>@metric.MetricName</span>
+                            <strong>@metric.Value</strong>
+                        </div>
+                        <div class="scene-inspector-v2-metric-track"
+                             role="progressbar"
+                             aria-label="@metric.MetricName"
+                             aria-valuemin="@effectiveMin"
+                             aria-valuemax="@effectiveMax"
+                             aria-valuenow="@clampedValue">
+                            <i></i>
+                        </div>
                     </div>
                 }
             </div>

PlotLine/wwwroot/css/site.css

@@ -4694,8 +4694,8 @@ body.dragging-location [data-drag-type="location"] {
   gap: 8px;
 }
 
-.scene-inspector-v2-metrics div,
-.scene-inspector-v2-counts div {
+.scene-inspector-v2-metrics > div,
+.scene-inspector-v2-counts > div {
   min-width: 0;
   border: 1px solid rgba(47, 111, 99, 0.12);
   border-radius: 8px;
@@ -4703,8 +4703,8 @@ 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 {
+.scene-inspector-v2-edit .scene-inspector-v2-metrics > div,
+.scene-inspector-v2-edit .scene-inspector-v2-counts > div {
   padding: 7px 8px;
 }
 
@@ -4795,6 +4795,15 @@ body.dragging-location [data-drag-type="location"] {
   width: 34px;
 }
 
+.scene-inspector-v2-character-list .visual-avatar > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  line-height: 1;
+}
+
 .scene-inspector-v2-avatar-pov {
   box-shadow: 0 0 0 2px rgba(47, 111, 99, 0.24);
 }
@@ -4911,28 +4920,34 @@ body.dragging-location [data-drag-type="location"] {
 
 .scene-inspector-v2-metric-bar {
   display: grid;
-  grid-template-rows: auto 42px auto;
-  align-items: end;
   gap: 6px;
-  text-align: center;
 }
 
-.scene-inspector-v2-metric-bar div {
+.scene-inspector-v2-metric-bar-heading {
   display: flex;
-  align-items: end;
-  justify-content: center;
-  min-height: 42px;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.scene-inspector-v2-metric-track {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
   border: 0;
-  background: transparent;
+  border-radius: 999px;
+  background: rgba(47, 111, 99, 0.12);
   padding: 0;
 }
 
-.scene-inspector-v2-metric-bar i {
+.scene-inspector-v2-metric-track i {
   display: block;
-  width: 22px;
-  height: max(6px, var(--metric-percent));
-  border-radius: 6px 6px 2px 2px;
-  background: linear-gradient(180deg, #6fa99b, var(--plotline-accent-dark));
+  width: var(--metric-percent);
+  min-width: 4px;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #6fa99b, var(--plotline-accent-dark));
 }
 
 .scene-inspector-v2-callout {
@@ -5578,12 +5593,8 @@ body.scene-inspector-editor-resizing {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.scene-inspector-v2-timeline .scene-inspector-v2-metric-bar {
-  grid-template-rows: auto 34px auto;
-}
-
-.scene-inspector-v2-timeline .scene-inspector-v2-metric-bar div {
-  min-height: 34px;
+.scene-inspector-v2-timeline .scene-inspector-v2-metric-track {
+  height: 7px;
 }
 
 @media (max-width: 1100px) {