1 hour ago · 5 min read1012 words · Tech · hide · 0 comments

Floating UI is one of those problems that looks small until you build it properly. You click a button. A menu appears below it. That sounds like the whole component. Then the page scrolls. The trigger moves. The menu clips against the viewport. A parent has overflow: hidden. A modal has a higher z-index. Escape should close it. Clicking outside should close it. Focus should move somewhere sensible. Focus should come back when it closes. The menu should not render halfway off-screen just because the trigger is near the bottom edge. What started as "put this panel under that button" becomes geometry, focus management, dismissal logic, portals, resize observers, and a quarterly fight with z-index: 9999. The platform has been quietly absorbing a lot of that work. The old shape The JavaScript version usually has three jobs. First, measure the trigger: const rect = trigger.getBoundingClientRect();Then place the panel: panel.style.top = `${rect.bottom + 8}px`; panel.style.left =…

No comments yet. Log in to reply on the Fediverse. Comments will appear here.