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.
This commit is contained in:
Gmer4Lfe
2026-08-09 10:29:50 -04:00
parent 6cdb0d1eab
commit 2aa9302751
2 changed files with 62 additions and 3 deletions
+49
View File
@@ -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; } #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 */ /* Monitor responsive — 4-column grid at medium width */
@media (max-width: 1400px) { @media (max-width: 1400px) {
/* CPU core bars — reduce gap/min-width at intermediate widths before cores get clipped */ /* CPU core bars — reduce gap/min-width at intermediate widths before cores get clipped */
+13 -3
View File
@@ -297,8 +297,19 @@ $_vv_doc_vars = array_merge(vv_conf_vars(), ['SCRIPTS_DIR' => SCRIPTS_DIR]);
<div id="vv-array-body">Loading...</div> <div id="vv-array-body">Loading...</div>
</div> </div>
</div>
<?php if (vv_ai_ui_on()): ?> <?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 <!-- 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 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 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> </div>
<?php endif; ?>
</div> </div>
<?php endif; ?>
<!-- ── How to read this page ──────────────────────────────────────────────────── <!-- ── How to read this page ────────────────────────────────────────────────────
Rendered from pages/readme/monitor-readme.md, not maintained here. That file is also what Rendered from pages/readme/monitor-readme.md, not maintained here. That file is also what