@mocanvas/mocanvas · function

OverflowingToolbar

declare function OverflowingToolbar({ label, maxInline, children }: OverflowingToolbarProps): react.JSX.Element

A toolbar that moves whatever will not fit into a "more" popover.

The split is measured, not guessed, so the same component works in a 320px phone frame and in a 1600px desktop one without the caller configuring anything.

## Why the *container* is measured, not the bar The plate is width: max-content, so its own width is a consequence of how many children it is currently showing. Deriving the split from that is a feedback loop: dropping a button narrows the bar, which drops another. The room available to it — the container, less what the CSS reserves for the docks on either side — is independent of the decision, so the split settles.

A child that renders nothing still takes a slot, so a caller mapping over a fixed list gets a split that does not jump around as tools appear.

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.