Let the AI card fill its row on the Monitor

The Assistant spans both rows and grid gives a spanning item's surplus to the tracks it spans, so
at Large the card sat at the top of a row much taller than it needed.
This commit is contained in:
Gmer4Lfe
2026-08-09 14:03:01 -04:00
parent c135d46cbc
commit 78c9875d92
+7 -5
View File
@@ -229,10 +229,8 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
box the row had already sized.
align-items:start, not the stretch the grid above uses, so a card opts in to matching the
Assistant rather than being dragged to its height. Conversations opts in below — a list next
to a transcript reads better level, and it has rows to fill the space with. AI stays at its
own height: its content is a handful of lines, and stretching it to 750px after an expand
would buy a tidy bottom edge with a mostly empty panel. */
Assistant rather than being dragged to its height. All three in this row opt in below; the
default stays start so a card added later has to say so. */
#vv-monitor-ai {
display: grid;
grid-template-columns: repeat(8, 1fr);
@@ -248,7 +246,11 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
what it sets. This has to be written as row+column rather than the spans that were inline on
the markup: a span says how wide, never which row, and auto-placement would drop Tokens into
the first gap it found rather than under AI. */
#vv-ai-stats-card { grid-column: 1 / span 1; grid-row: 1; }
/* AI fills its own row rather than sitting at the top of it. The Assistant spans both rows, and
grid hands a spanning item's surplus height to the tracks it spans — so at Large, row 1 grows
well past what the AI card's few lines need and the card left a gap above Tokens. Stretching is
a no-op at the smaller sizes, where there is no surplus to take. */
#vv-ai-stats-card { grid-column: 1 / span 1; grid-row: 1; align-self: stretch; }
#vv-ai-tokens-card { grid-column: 1 / span 1; grid-row: 2; }
#vv-ai-chats-card { grid-column: 2 / span 2; grid-row: 1 / span 2; }
#vv-ai-assistant-card { grid-column: 4 / span 5; grid-row: 1 / span 2; }