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:
parent
43d6508369
commit
6ff37ef1f6
1 changed files with 11 additions and 1 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue