Level the Conversations card with the Assistant beside it

A list reads better against a transcript when the two share a bottom edge, including after the
Assistant is expanded.
This commit is contained in:
Gmer4Lfe
2026-08-09 10:47:55 -04:00
parent 44cf4e7516
commit 33e696071e
+37 -11
View File
@@ -222,9 +222,11 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
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. */
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. */
#vv-monitor-ai {
display: grid;
grid-template-columns: repeat(8, 1fr);
@@ -235,12 +237,32 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
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. */
/* Conversations takes its height from the Assistant rather than setting its own. align-self
overrides the row's align-items:start for this one card, so it fills the track the Assistant
defines — level at rest, and level again after expanding, since the track grows with it.
It needs its own scroll to do that, which it did not need inside #vv-monitor: there it
inherited a cap from `.vv-card > div { flex:1; overflow-y:auto }`. Out here the list is
content-driven, so an install with forty saved chats would render forty rows and become the
tallest card itself — setting the row height instead of following it, which is the inverse of
what this rule is for. The h3 pins and the list takes what is left, the same shape the monitor
grid above uses. */
#vv-monitor-ai #vv-ai-chats-card {
align-self: stretch;
display: flex;
flex-direction: column;
overflow: hidden;
}
#vv-monitor-ai #vv-ai-chats-card h3 { flex-shrink: 0; }
/* height:0 with flex:1 is the part that makes this follow rather than lead. flex-basis is
already 0, so it changes nothing about the layout; what it changes is the height the list
reports upward. Without it the card can still hand the auto-sized grid track a max-content
height of the whole list, and forty conversations would set the row that the Assistant is
supposed to set. It grows back to fill the track through flex, then scrolls. */
#vv-monitor-ai #vv-ai-chats-card > div {
max-height: 300px;
flex: 1;
height: 0;
min-height: 0;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
@@ -256,12 +278,16 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
#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. */
/* Phone — single column, natural heights, page scrolls. Matching heights is meaningless once
the cards are stacked, and the inner scroll has to go with it: 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; }
#vv-monitor-ai #vv-ai-chats-card { display: block; overflow: visible; }
/* height:0 is only inert while this is a flex item — as a plain block it would collapse the
list to nothing, so it goes back with the flex context that justified it. */
#vv-monitor-ai #vv-ai-chats-card > div { height: auto; min-height: auto; overflow-y: visible; }
}
/* Monitor responsive — 4-column grid at medium width */