updated
Within many applications, we need toolbars. The problem is that they can only fit as many tools as their size allows. What happens we we resize the UI and the tools that fit previously don’t fit anymore? This component, made at Kosmik, solves this problem by turning the items that don’t fit into a dropdown, so that all actions are always available.
Try resizing the card below, using the bottom-right corner, to shrink the toolbar:
There are no breakpoints in this component, and it never listens for window resizes. A ResizeObserver watches the toolbar itself, which is the only thing that works when the element that changed size is a panel, a split view, or in this case a card with a resize handle on it, rather than the window.
Each item is then measured against the space available, with one wrinkle worth pointing out: every item except the last is checked against the container width minus the dropdown trigger, while the last item is checked against the full width. The last item doesn’t have to make room for a trigger that would only need to exist if something had overflowed, and without that exception you get a toolbar that hides its final button in order to make space for a menu containing exactly that button.
On mount, the container takes a min-width equal to the trigger’s own width, so however far you drag the handle the toolbar can’t shrink past the one control that has to stay reachable. Everything else moves into the dropdown as the room runs out, which is the whole point: at any size, every action is still available.