← Dev log
EduQate·frontend·2026-08-20

Two sticky elements on the same pixel

Two sticky top-0 elements pinned to the same pixel at phone width, so the section nav painted over the app header. Fixed by measuring the header's real height.

Only visible by using it

Invisible to a code read. Found by being the real user, on a real device, at a real width.

At phone width the organisation detail page's section-jump nav (sticky top-0, z-30) pinned to the same pixel as the app header (sticky top-0, z-20) and painted over it, hiding the logo, the language switcher and half the Create Account button. Neither element knows the other exists; that's the whole bug.

The fix that generalizes: measure the header's real rendered height with a ResizeObserver, and only apply the offset when its computed position is actually sticky or fixed, so it resolves to 0 for logged-in users where the header isn't pinned, and follows the header's two-row mobile wrap and RTL layout for free. A hardcoded offset would have been wrong in three of those four states.