Skip to content

Commit 80aca2b

Browse files
ndemiancclaude
andcommitted
fix(ai): contain the chevron mark + fix the un-clickable X on the account modal
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 <noreply@anthropic.com>
1 parent b787b38 commit 80aca2b

1 file changed

Lines changed: 6 additions & 5 deletions

File tree

extensions/levelcode-ai/media/chat.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -874,14 +874,15 @@
874874
background: var(--vscode-button-background); color: var(--vscode-button-foreground);
875875
border: 1px solid var(--vscode-contrastBorder, transparent);
876876
}
877-
.acctcard.classic .ovclose { color: var(--cc-text3); }
877+
.acctcard.classic .ovclose { color: var(--cc-text3); z-index: 3; } /* above the full-bleed hero, so the close click lands */
878878
.acctcard.classic .ovclose:hover { color: var(--cc-text); background: color-mix(in srgb, var(--cc-text3) 18%, transparent); }
879879
/* Hero — the landing page's floating chevron over four drifting "portal" circles. Decorative (aria-hidden),
880880
full-bleed at the top of the modal; the motion respects prefers-reduced-motion (guard below). */
881-
.acctcard.classic .hero { position: relative; height: 146px; overflow: hidden; }
882-
/* Absolutely placed with a top gap so the chevron peak clears the modal's rounded top edge; the SVG is
883-
taller than the hero, so only the LOWER soft circles bleed off — the chevron itself is never clipped. */
884-
.acctcard.classic .hero .portalmark { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 182px; height: auto; }
881+
/* Hero. The mark is small enough to sit fully INSIDE the hero (place-items:center) — no bleed on any
882+
side. pointer-events:none so the decorative mark never intercepts clicks (it was covering — and
883+
swallowing — the X close button, which paints under acctBody). */
884+
.acctcard.classic .hero { position: relative; height: 148px; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
885+
.acctcard.classic .hero .portalmark { width: 150px; height: auto; }
885886
.acctcard.classic .portal-layer { transform-origin: 50% 60%; animation: portalDrift 7s ease-in-out infinite; }
886887
.acctcard.classic .portal-layer:nth-child(2) { animation-delay: -1.4s; }
887888
.acctcard.classic .portal-layer:nth-child(3) { animation-delay: -2.8s; }

0 commit comments

Comments
 (0)