From 80aca2b46fc5557b0a6afaff5ee82c5f6b363d83 Mon Sep 17 00:00:00 2001 From: Sergii Demianchuk Date: Sat, 25 Jul 2026 23:31:03 -0400 Subject: [PATCH] fix(ai): contain the chevron mark + fix the un-clickable X on the account modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two follow-ups from live feedback: - The X close button was dead. The full-bleed hero (acctBody's first child) paints AFTER the .ovclose sibling and covered it, swallowing the click. Fix: z-index:3 on the classic card's .ovclose (it's absolute inside a position:relative .acctcard) so it sits above the hero, plus pointer-events:none on the decorative hero so it never intercepts. The onclick handler was fine. - Shrink the mark to fit fully inside the hero (place-items:center, 182->150px) so it no longer bleeds off any edge — no top clip, no side/bottom bleed. Co-Authored-By: Claude Opus 4.8 --- extensions/levelcode-ai/media/chat.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/extensions/levelcode-ai/media/chat.html b/extensions/levelcode-ai/media/chat.html index e35c826..46b5ac7 100644 --- a/extensions/levelcode-ai/media/chat.html +++ b/extensions/levelcode-ai/media/chat.html @@ -874,14 +874,15 @@ background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: 1px solid var(--vscode-contrastBorder, transparent); } - .acctcard.classic .ovclose { color: var(--cc-text3); } + .acctcard.classic .ovclose { color: var(--cc-text3); z-index: 3; } /* above the full-bleed hero, so the close click lands */ .acctcard.classic .ovclose:hover { color: var(--cc-text); background: color-mix(in srgb, var(--cc-text3) 18%, transparent); } /* Hero — the landing page's floating chevron over four drifting "portal" circles. Decorative (aria-hidden), full-bleed at the top of the modal; the motion respects prefers-reduced-motion (guard below). */ - .acctcard.classic .hero { position: relative; height: 146px; overflow: hidden; } - /* Absolutely placed with a top gap so the chevron peak clears the modal's rounded top edge; the SVG is - taller than the hero, so only the LOWER soft circles bleed off — the chevron itself is never clipped. */ - .acctcard.classic .hero .portalmark { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 182px; height: auto; } + /* Hero. The mark is small enough to sit fully INSIDE the hero (place-items:center) — no bleed on any + side. pointer-events:none so the decorative mark never intercepts clicks (it was covering — and + swallowing — the X close button, which paints under acctBody). */ + .acctcard.classic .hero { position: relative; height: 148px; display: grid; place-items: center; overflow: hidden; pointer-events: none; } + .acctcard.classic .hero .portalmark { width: 150px; height: auto; } .acctcard.classic .portal-layer { transform-origin: 50% 60%; animation: portalDrift 7s ease-in-out infinite; } .acctcard.classic .portal-layer:nth-child(2) { animation-delay: -1.4s; } .acctcard.classic .portal-layer:nth-child(3) { animation-delay: -2.8s; }