fix(ui): Menues und Dialoge ueber Portal ausgeben
Das Statusmenue auf der Projektseite wurde von den Schaltflaechen "Bearbeiten" und "Loeschen" ueberdeckt, war unten abgeschnitten und der Fortschrittswert schien hindurch. Drei Ursachen, alle mit derselben Wurzel: 1. Die Karten setzen overflow-hidden fuer den Akzentstreifen und den Farbverlaufsrand. Ein absolut positioniertes Kind wird daran abgeschnitten. 2. .glass setzt backdrop-filter, die Projektkarte bekommt beim Hovern zusaetzlich ein transform. Beides erzeugt einen Stacking-Context: das z-index des Menues galt nur noch innerhalb der Karte und verlor gegen spaeter gezeichnete Geschwister. Aus demselben Grund bezog sich das "position: fixed" der Klickflaeche zum Schliessen auf die Karte statt auf das Fenster - ein Klick daneben schloss das Menue nicht. 3. .glass hat 3,5 % Deckkraft. Als Kartenflaeche gut, als Overlay unbrauchbar. Der eigene backdrop-filter half nicht, weil er innerhalb eines Vorfahren mit backdrop-filter wirkungslos bleibt. Behoben durch eine neue Popover-Komponente, die per createPortal am body haengt, ihre Position aus dem Ankerelement berechnet und beim Scrollen und bei Groessenaenderungen nachfuehrt. Reicht der Platz nach unten nicht, klappt sie nach oben. Dazu die Klasse .popover mit nahezu deckendem Hintergrund. Betrifft Statusauswahl, Benutzermenue und - aus demselben Grund - den Modal-Dialog: der wird aus Karten heraus geoeffnet und haette sich sonst an der Karte statt am Fenster ausgerichtet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -69,6 +69,24 @@
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flaeche fuer alles, was ueber dem Inhalt schwebt: Menues, Dialoge.
|
||||
*
|
||||
* Bewusst nahezu deckend statt Glas. Ein Overlay muss lesbar sein, egal
|
||||
* was darunter liegt - bei 3,5 % Deckkraft schien der Inhalt dahinter
|
||||
* durch. backdrop-filter hilft hier nicht: liegt das Element in einem
|
||||
* Vorfahren, der selbst backdrop-filter setzt (unsere Karten), bleibt die
|
||||
* Weichzeichnung wirkungslos.
|
||||
*/
|
||||
.popover {
|
||||
background: rgba(9, 11, 24, 0.97);
|
||||
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||
border-radius: 0.9rem;
|
||||
box-shadow:
|
||||
0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
|
||||
0 28px 70px -24px rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
/* ── Text & Akzente ───────────────────────────────────────── */
|
||||
|
||||
.text-gradient {
|
||||
|
||||
Reference in New Issue
Block a user