Place the assistant's mark with a transform, not a background percentage

The image is wider than the transcript is tall, so as a background it overflowed and percentage positioning ran backwards — nudging it down visibly raised it.
This commit is contained in:
Gmer4Lfe
2026-08-17 18:08:27 -04:00
parent a27bb41b42
commit 63ec110177
+8 -2
View File
@@ -160,9 +160,15 @@ function vv_ai_chat_assets(): void {
its padding box and drift as the transcript scrolls, and a child element would scroll away with
the messages. inset:0 on the positioned wrapper holds it still behind whatever moves. */
.vv-ai-chat-wrap { background:#0b0b0b; border-radius:6px; }
/* Positioned box with a transform, not a background-position percentage.
The mark is wider than this transcript is tall, so as a background it overflows vertically —
and percentage positioning on an overflowing image runs BACKWARDS: raising the number moves it
up. Nudging it "down" from 74% to 86% visibly raised it. A sized box centred on a point behaves
the way the number reads, and matches how the mesh pane places the same image. */
.vv-ai-chat-wrap::before {
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background:url('/plugins/varaverk/icons/varaverk.png') center 86%/min(84%,520px) no-repeat;
content:''; position:absolute; left:50%; top:74%; transform:translate(-50%,-50%);
width:min(84%,520px); aspect-ratio:1; z-index:0; pointer-events:none;
background:url('/plugins/varaverk/icons/varaverk.png') center/contain no-repeat;
opacity:.032; filter:grayscale(1);
}
.vv-ai-empty { color:#3a3a3a; font-size:12px; text-align:center; padding:60px 20px; line-height:1.7; }