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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user