Seitenleiste bleibt stehen, Benutzermenue wieder erreichbar
Am Schreibtisch war "Mein Konto" praktisch nicht zu finden - und damit auch nicht Passwortwechsel, zweiter Faktor und Passkey-Verwaltung. Die Seitenleiste hatte keine feste Hoehe und wuchs mit der Seite mit. Ihr Fuss mit dem Benutzermenue landete deshalb am Ende der SEITE statt am unteren Bildschirmrand: auf /heute bei 1632 Pixel in einem 900 Pixel hohen Fenster. Nachgemessen, nicht geraten - im Browser auf fuenf Seiten. Der Fehler sah nach nichts aus. Kein Element fehlte, nichts war kaputt, die Seite sah richtig aus. Man musste nur ganz nach unten scrollen. Behoben mit lg:sticky, lg:top-0, lg:h-dvh und lg:self-start. Das self-start gehoert dazu, weil ein Flex-Kind sonst auf die volle Zeilenhoehe gestreckt wird und die feste Hoehe wieder verliert. Die Navigation dazwischen hat bereits overflow-y-auto und scrollt bei Bedarf in sich selbst. Am Handy war es nie ein Problem - dort sitzt das Menue in der ohnehin festen Kopfzeile. Neu: e2e/benutzermenue.spec.ts fragt nicht, ob das Menue im DOM ist, sondern ob es im sichtbaren Bereich steht - auf fuenf Seiten, an drei Scrollpositionen, auf einem flachen Laptopfenster und am Handy. Die Position in der Mitte ist Absicht: Am Seitenende wird eine mitwachsende Leiste zufaellig doch sichtbar, der Test waere gruen und der Fehler trotzdem da. Beide Sichtbarkeitstests sind gegen den kaputten Zustand gegengeprueft und schlagen dort an. Refs #1
This commit is contained in:
@@ -56,8 +56,21 @@ export function AppHuelle({
|
||||
Zum Inhalt springen
|
||||
</a>
|
||||
|
||||
{/* --- Seitenleiste am Schreibtisch --------------------------------- */}
|
||||
<aside className="no-print hidden w-72 shrink-0 border-r bg-card lg:flex lg:flex-col">
|
||||
{/* --- Seitenleiste am Schreibtisch ---------------------------------
|
||||
|
||||
sticky + h-dvh, nicht einfach mitwachsen lassen: Ohne feste Hoehe
|
||||
wird die Leiste so hoch wie die laengste Seite. Der Fuss mit dem
|
||||
Benutzermenue - und damit der einzige Weg zu "Mein Konto",
|
||||
Passwort, zweitem Faktor und Passkeys - landet dann am Ende der
|
||||
Seite statt am unteren Bildschirmrand. Auf /heute waren das 1632
|
||||
Pixel bei 900 Pixel Fensterhoehe: unerreichbar, ohne dass etwas
|
||||
kaputt aussah.
|
||||
|
||||
self-start gehoert dazu, weil ein Flex-Kind sonst auf die volle
|
||||
Zeilenhoehe gestreckt wird und die feste Hoehe wieder verliert.
|
||||
Die Navigation dazwischen hat bereits overflow-y-auto und scrollt
|
||||
bei Bedarf in sich selbst. */}
|
||||
<aside className="no-print hidden w-72 shrink-0 border-r bg-card lg:sticky lg:top-0 lg:flex lg:h-dvh lg:flex-col lg:self-start">
|
||||
<div className="flex h-16 items-center border-b px-5">
|
||||
<Link href="/heute" className="flex items-center gap-2 font-semibold">
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user