fix: Kopfleiste ueber den Inhalt, damit das Team-Panel bedienbar ist

<header> und <main> waren beide `relative z-10`. Bei gleichem z-index
gewinnt, was spaeter im DOM steht — also <main>. Das aufgeklappte
Team-Panel haengt unter die Kopfleiste hinein in diese Flaeche und lag
dadurch dahinter: Beim Hinunterfahren traf der Zeiger <main> statt das
Panel, die Komponente sah ein Verlassen und klappte nach delayDuration
zu, bevor ein Eintrag zu treffen war.

Ein z-50 am Panel half nicht — die Kopfleiste ist mit ihrem eigenen
z-index ein Stapelkontext, aus dem kein Kind herausragt. Also die
Kopfleiste selbst hoeher.

Nachgestellt und A/B geprueft: mit z-10 schliesst das Menue beim
Hinunterfahren, mit z-20 bleibt es offen und der Eintrag laesst sich
anklicken.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
This commit is contained in:
Daniel Michelberger 2026-09-07 22:34:25 +02:00
parent 43d6508369
commit 6ff37ef1f6

View file

@ -166,7 +166,17 @@
<Logo team={teams.active} class="size-[32rem] max-w-[70vw] rotate-12" /> <Logo team={teams.active} class="size-[32rem] max-w-[70vw] rotate-12" />
</div> </div>
<header class="relative z-10 border-b bg-card"> <!--
z-20 und nicht z-10: <main> weiter unten ist ebenfalls
`relative z-10` und steht spaeter im DOM, liegt also oben. Das
aufgeklappte Team-Panel haengt unter die Kopfleiste hinein in
diese Flaeche und lag dadurch dahinter — der Zeiger traf beim
Hinunterfahren `main` statt das Panel, und das Menue klappte zu,
bevor jemand einen Eintrag treffen konnte. Ein z-50 am Panel half
nicht: Die Kopfleiste ist mit ihrem z-index ein eigener
Stapelkontext, aus dem kein Kind herausragt.
-->
<header class="relative z-20 border-b bg-card">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex min-h-16 items-center justify-between gap-4 py-2"> <div class="flex min-h-16 items-center justify-between gap-4 py-2">
<!-- Links: Logo und Menü. Das negative -my-3 frisst das <!-- Links: Logo und Menü. Das negative -my-3 frisst das