fix: Team-Panel unter seinen Menuepunkt, ohne toten Spalt

Zwei Fehler, einer je Anlauf.

Der Inhalt gehoert ohne Viewport gerendert: Dann haengt er am
NavigationMenu.Item, das ohnehin `relative` ist, und steht damit unter
"Team". Mit Viewport ist er eine eigene Flaeche unter der ganzen Leiste
und beginnt an deren linkem Rand — unter "Dashboard".

Und der Standardabstand mt-1.5 war ein toter Streifen zwischen
Menuepunkt und Panel. Wer den Zeiger hinunterbewegte, verliess beides
zugleich; nach delayDuration klappte das Menue zu, bevor ein Eintrag zu
treffen war. Ein Hover-Menue darf keine Luecke haben.

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:28:41 +02:00
parent 52dbde2a25
commit 43d6508369
2 changed files with 14 additions and 10 deletions

View file

@ -63,7 +63,13 @@
{/snippet}
</NavigationMenu.Trigger>
<NavigationMenu.Content class="min-w-56">
<!--
mt-0 statt der 1.5 aus dem Standard: Der Abstand war ein toter Streifen
zwischen Menuepunkt und Panel. Wer den Zeiger hinunterbewegte, verliess
beides zugleich, und nach delayDuration klappte das Menue zu, bevor ein
Eintrag zu treffen war. Ein Hover-Menue darf keine Luecke haben.
-->
<NavigationMenu.Content class="min-w-56 group-data-[viewport=false]/navigation-menu:mt-0">
{#each teams.records as t (t.id)}
<button
type="button"

View file

@ -187,15 +187,13 @@
</a>
<!--
Mit Viewport, also so, wie die Komponente gedacht
ist. Ohne ihn haengt das Panel per top-full/left-0
am naechsten positionierten Vorfahren — das ist
die Leiste selbst, nicht der Menuepunkt. Es
erschien dann am linken Rand statt unter „Team",
der Zeiger lief auf dem Weg dorthin ins Leere und
das Menue klappte zu, bevor jemand einen Eintrag
treffen konnte. -->
<NavigationMenu.Root class="hidden md:flex">
Ohne Viewport: Der Inhalt haengt dann am
Menuepunkt, der als NavigationMenu.Item ohnehin
`relative` ist. Mit Viewport waere er eine eigene
Flaeche unter der ganzen Leiste und stuende an
deren linkem Rand — unter „Dashboard" statt unter
„Team". -->
<NavigationMenu.Root viewport={false} class="hidden md:flex">
<NavigationMenu.List class="items-center gap-2">
{#each nav as item}
{@const Icon = item.icon}