From 2aa9302751569cb31e2241041e3543135c53f26f Mon Sep 17 00:00:00 2001
From: Gmer4Lfe <gmer4lfe@gmail.com>
Date: Sun, 9 Aug 2026 10:29:50 -0400
Subject: [PATCH] Let the Assistant's expand control actually give the
 transcript room

The AI cards sat in the monitor grid, which caps every row at a quarter of the viewport and
clips the card, so expanding grew the transcript inside a box the row had already sized.
---
 Plugin/unraid/css/varaverk.css  | 49 +++++++++++++++++++++++++++++++++
 Plugin/unraid/pages/monitor.php | 16 +++++++++--
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/Plugin/unraid/css/varaverk.css b/Plugin/unraid/css/varaverk.css
index 50d0bb6..c2ac7c4 100644
--- a/Plugin/unraid/css/varaverk.css
+++ b/Plugin/unraid/css/varaverk.css
@@ -215,6 +215,55 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
   #vv-monitor .vv-card > div { overflow-y: visible; min-height: auto; }
 }
 
+/* ── Monitor: AI row ──────────────────────────────────────────────────────────
+   Same eight columns and the same gap as #vv-monitor, and margin-top matches that grid's row
+   gap, so the two containers read as one board. What differs is height, which is the whole
+   reason it is a separate grid: no grid-auto-rows cap and no overflow:hidden on the cards, so
+   the Assistant's expand control gives the transcript real room instead of growing it inside a
+   box the row had already sized.
+
+   align-items:start, not the stretch the grid above uses. Expanding is a request to read one
+   card; stretching its neighbours to 750px of mostly empty panel answers a question nobody
+   asked. The cards sit at their own heights and the Assistant grows past them. */
+#vv-monitor-ai {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 12px;
+  margin-top: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: start;
+}
+
+/* Conversations scrolls on its own now. Inside #vv-monitor it inherited a cap from
+   `.vv-card > div { flex:1; overflow-y:auto }` and never needed one of its own; out here the
+   list is content-driven, and an install with forty saved chats would render forty rows. The
+   cap matches the Assistant's resting transcript height so the row starts out level. */
+#vv-monitor-ai #vv-ai-chats-card > div {
+  max-height: 300px;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+#vv-monitor-ai #vv-ai-chats-card > div::-webkit-scrollbar { display: none; }
+
+/* Medium width — 4 columns, mirroring #vv-monitor's own breakpoint. The 1/2/5 spans do not
+   survive the narrower grid: 5 of 4 would silently overflow the track. */
+@media (max-width: 1024px) {
+  #vv-monitor-ai { grid-template-columns: repeat(4, 1fr) !important; }
+  #vv-ai-stats-card     { grid-column: span 1 !important; }
+  #vv-ai-chats-card     { grid-column: span 3 !important; }
+  #vv-ai-assistant-card { grid-column: span 4 !important; }
+}
+
+/* Phone — single column, natural heights, page scrolls. The list cap goes too: on a page that
+   already scrolls, a scroll region inside it is a trap for a thumb. */
+@media (max-width: 480px) {
+  #vv-monitor-ai { grid-template-columns: 1fr !important; }
+  #vv-monitor-ai > .vv-card { grid-column: 1 / -1 !important; }
+  #vv-monitor-ai #vv-ai-chats-card > div { max-height: none; overflow-y: visible; }
+}
+
 /* Monitor responsive — 4-column grid at medium width */
 @media (max-width: 1400px) {
   /* CPU core bars — reduce gap/min-width at intermediate widths before cores get clipped */
diff --git a/Plugin/unraid/pages/monitor.php b/Plugin/unraid/pages/monitor.php
index 9e8c25c..19d88f3 100644
--- a/Plugin/unraid/pages/monitor.php
+++ b/Plugin/unraid/pages/monitor.php
@@ -297,8 +297,19 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
       <div id="vv-array-body">Loading...</div>
     </div>
 
+</div>
+
 <?php if (vv_ai_ui_on()): ?>
-    <!-- Row 5: AI residency | Saved conversations | Assistant -->
+<!-- ── AI row — its own grid, deliberately ──────────────────────────────────────
+     Same eight columns and the same gap, so it reads as the last row of the one above. It is a
+     separate container because #vv-monitor caps every row at minmax(0, ~25vh) and clips its
+     cards with overflow:hidden — which is right for a dashboard tile that must not push the
+     others off screen, and wrong for the one card you sit and read. Inside that grid the
+     expand control did nothing visible: the transcript grew and scrolled inside a box whose
+     height the row had already decided.
+     Cards here size to their content instead. -->
+<div id="vv-monitor-ai">
+    <!-- AI residency | Saved conversations | Assistant -->
     <!-- Present only on the AI host with AI_ENABLED true, on the same footing as the GPU and UPS
          cards above: a subsystem that is not here does not render an empty card explaining that
          it is not here. api/ai.php refuses every action independently, so this is presentation
@@ -349,9 +360,8 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
       ]);
       ?>
     </div>
-<?php endif; ?>
-
 </div>
+<?php endif; ?>
 
 <!-- ── How to read this page ────────────────────────────────────────────────────
      Rendered from pages/readme/monitor-readme.md, not maintained here. That file is also what