diff --git a/Plugin/unraid/css/varaverk.css b/Plugin/unraid/css/varaverk.css index c2ac7c4..b6a5615 100644 --- a/Plugin/unraid/css/varaverk.css +++ b/Plugin/unraid/css/varaverk.css @@ -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 */