Small screens

Below compactBelow (640px by default) the bracket pages through one round at a time. The width that counts is the container's, not the window's, so a bracket in a sidebar or a modal adapts too.

The paged bracketCopy Anchor Link

With compact="bracket" (the default), the round in focus stacks tightly and the next round peeks in with its connector lines. Swipe or tap a round and every match glides into place. Swiping past the first or last round meets a soft rubber-band resistance.

compact="list" shows each round as a plain list of matches instead.

<Bracket stage={stage} />                       // swipeable bracket
<Bracket stage={stage} compact="list" />        // swipeable lists
<Bracket stage={stage} compactBelow={480} />    // switch at a different width

The whole tree, on any screenCopy Anchor Link

Set compactBelow={0} to always show the full tree, then choose how it fits with mode:

<Bracket stage={stage} compactBelow={0} mode="pan-zoom" />

In pan-zoom mode, minScale, maxScale and controls are available on <Bracket.Viewport>.