Review World Cup 2026 knockout spider and identify launch/polish work

[petternitter]

Summary

Review the current World Cup 2026 knockout spider implementation, identify any polish or "launch readiness" work still needed/worthwhile doing and assess whether there are any low effort changes that would improve future reusability without adding unnecessary complexity.

Why

A basic version of the knockout spider is already underway for World Cup 2026 with mock data, but the increased number of stages means it could do with some polish or potential improvements. This ticket is about confirming what's been done, bringing it into a good enough state for launch and checking whether any small structural improvements now could reduce future rework.

Scope

• Review the current World Cup 2026 knockout spider implementation
• Identify any remaining polish, bug fixing, UX, responsive, performance or data work needed/recommended before launch
• Assess whether any low effort structural improvements could make the implementation easier to reuse or adapt for future tournaments
• Document anything that should remain tournament-specific for launch but could be made more reusable later
• Recommend the smallest sensible set of changes needed before launch

Examples

• Tidy tournament specific values or assumptions into a clearer structure without rebuilding the feature
• Leave the implementation largely as-is if further abstraction would add more complexity than value before launch

Out of scope

• Rebuilding the knockout spider from scratch
• Designing a fully generic tournament/event spider as part of this
• Building this into editorial tooling or full configurability now

Deliverable

• Short review of the current implementation
• Clear list of suggested launch/polish work
• Recommendation on any low-cost structural improvements worth making now

Acceptance criteria

• Current World Cup 2026 knockout spider implementation has been reviewed
• Remaining launch/polish work is clearly identified
• Reusability/configurability opportunities have been assessed
• A pragmatic recommendation has been made on what to change now vs later

Notes/links

World Cup 2026 knockout spider implementation: guardian/frontend#28702

[jamesmockett]

Issues with existing implementation

• The increase in the number of teams and 'round of 32' playoffs has added two extra columns to the spider chart, severely constraining what was already a very tight layout leading to various layout issues:
  • Team names (and pre-tournament 'ghost team' placeholders) don't fit in the available space, pushing scores out of view. (eg. 'Bosnia-Herzegovina'.)
  • Match comments (eg. 'Switzerland win 3-1 after extra time') often wrap on to three lines, but there is insufficient vertical space.
  • 3rd place playoff box is misaligned as its size and position is based on the chart having 7 columns, but it now has 9.
• Some 'ghost team' placeholders are displayed incorrectly as PA is using new IDs.
• Some fixtures appear to be in the wrong order when compared to the official FIFA knockout chart.
• The chart is not responsive and is only shown at screen widths of 980px and above. On smaller screens it is displayed as a table with collapsible sections.
• In general, the layout is fixed and fairly inflexible as is.

Required changes for launch

• Decrease size of team names and fix layout so they can be truncated if necessary without making the score invisible
• Decrease size of match comments and increase height of chart
• Align 3rd place playoff box
• Update 'ghost team' list and order of fixtures to match FIFA chart

These changes have been made in guardian/frontend#28737

Recommendations for additional changes

Whilst rebuilding the spider chart completely is out of scope we could look at refactoring and simplifying the layout CSS. It was originally built some time ago and we now have better and more flexible layout options which could form the basis for a new implementation built into DCAR. We could also make the sizing and positioning of elements less dependent upon a specific number of columns which would make it simpler to reuse for other competitions without having to change it each time.

Most of the layout issues stem from the extra 'round of 32' playoffs and the resulting constraint on the width of each column. There are a couple of things we could possibly do here:

• Support horizontal scrolling to allow more room for the content rather than trying to fit the entire chart into the existing 940px wide container
• Make the chart asymmetric with the final on the right of the chart rather than the middle. (This is how it is displayed by the BBC and Wikipedia.) This would reduce the number of columns from 9 to 5, giving much more breathing room. The main downside is that the chart would be twice as tall as it currently is. It may also not be an easy change to apply to the existing layout.

The BBC use 3 letter abbreviations of the team names which avoids issues with lack of space and truncation. However, the PA feed only appears to include the full team name so we would need to maintain our own list of abbreviated names and map between them if we wanted to do this.

The chart lacks visual interest due to being mostly black and grey. Team crests are shown when matches are underway, but there are opportunities to add some additional colour and polish the overall design without rebuilding the entire chart. For example, we could make the team name containers into a box and add a background colour to differentiate it from the grey background, and update the colour of the connecting lines using the palette from the style guide.