fix: hero demo popup closes on any outside click, add close button

Outside-click handling was scoped to the demo scene, so clicks elsewhere
on the page left the popup open and it felt unclosable. A document-level
listener now collapses it from anywhere, like a real extension popup,
and the popup header gained an explicit close button next to the version
link (hidden in the static mobile mockup).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-06 03:23:15 +02:00
parent 917afd795e
commit fd0ad310ce
3 changed files with 52 additions and 0 deletions
+29
View File
@@ -755,6 +755,35 @@ html.theme-light .koala-speech-bubble::after {
color: var(--accent);
}
/* Close button for the hero demo popup (hidden in the static mobile mockup) */
.mock-close-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 8px;
padding: 0;
flex-shrink: 0;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-muted);
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.mock-close-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 1024px) {
.mock-close-btn {
display: none;
}
}
.mock-tabs {
display: flex;
gap: 4px;