diff --git a/Plugin/unraid/css/varaverk.css b/Plugin/unraid/css/varaverk.css index b6a5615..ed91489 100644 --- a/Plugin/unraid/css/varaverk.css +++ b/Plugin/unraid/css/varaverk.css @@ -237,29 +237,42 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r align-items: start; } -/* 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. +/* Explicit placement, two rows. The left column carries AI over Tokens; Conversations and the + Assistant span both rows, so the Assistant sets the height and the two stacked cards divide + 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; } +#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; } - 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 { +/* Conversations and Tokens take their height from the Assistant rather than setting their own. + align-self overrides the row's align-items:start for these two, so they fill the track the + Assistant defines — level at rest, and level again after expanding, since the track grows + with it. + + They need their own scroll to do that, which Conversations did not need inside #vv-monitor: + there it inherited a cap from `.vv-card > div { flex:1; overflow-y:auto }`. Out here both are + content-driven, so forty saved chats — or a ledger with both hosts and a footer — would make + the card the tallest thing in its column and set the height it is supposed to be following. + The h3 pins and the body takes what is left, the same shape the monitor grid above uses. */ +#vv-monitor-ai #vv-ai-chats-card, +#vv-monitor-ai #vv-ai-tokens-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 +#vv-monitor-ai #vv-ai-chats-card h3, +#vv-monitor-ai #vv-ai-tokens-card h3 { flex-shrink: 0; } +/* height:0 with flex:1 is the part that makes these follow rather than lead. flex-basis is + already 0, so it changes nothing about the layout; what it changes is the height the body 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 { + height of its whole contents, and the track it was meant to fit inside grows to fit it + instead. It grows back to fill the track through flex, then scrolls. */ +#vv-monitor-ai #vv-ai-chats-card > div, +#vv-monitor-ai #vv-ai-tokens-card > div { flex: 1; height: 0; min-height: 0; @@ -267,15 +280,57 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r -ms-overflow-style: none; scrollbar-width: none; } -#vv-monitor-ai #vv-ai-chats-card > div::-webkit-scrollbar { display: none; } +#vv-monitor-ai #vv-ai-chats-card > div::-webkit-scrollbar, +#vv-monitor-ai #vv-ai-tokens-card > div::-webkit-scrollbar { display: none; } + +/* ── AI token ledger — shared by the AI tab and the Monitor card ────────────── + Moved out of pages/ai.php so both surfaces can draw the same rows. A tab's inline