bracketryjs

Visualize a knockout tournament in the browser

By default bracketry is trying to display as much rounds as possible. But it means that most of the time there will be a partly visible round on the right. If it doesn't look good to you, there are visibleRoundsCount and displayWholeRounds options which can fix the number of rounds visible at a time.

This option ensures that only N number of rounds will be displayed regardless of actual content width. Value 0 (which is a default) means "display as much rounds as possible, without compressing them". Setting a reasonable matchMaxWidth may be a good idea in case you set a fairly small visibleRoundsCount. Otherwise matches may become too wide. It's advisable to set visibleRoundsCount to 1 when you address narrow mobile screens.

...
    
const options = {
    visibleRoundsCount: 1
}

createBracket(data, wrapper, options)

... results in ...

This option forces bracketry to widen the rounds slightly so that the partly visible round on the right disappears. Setting displayWholeRounds to true is another solution for creating a decent mobile experience. Setting a reasonable matchMaxWidth may be a good idea to avoid unduly wide matches. displayWholeRounds is not applied if "visibleRoundsCount" option is set to something other than 0.

...
    
const options = {
    displayWholeRounds: true
}

createBracket(data, wrapper, options)

... results in ...