From 655dcd7ff1fbfb338793fe668c32ed07e133cbf9 Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Tue, 27 Jan 2026 15:42:10 +0200
Subject: [PATCH 1/2] display bracket header options based on available space

---
 javascript/commons/Bracket.js     | 28 ++++++++++++++++++++++++++++
 stylesheets/commons/Brackets.scss |  4 ++++
 2 files changed, 32 insertions(+)

diff --git a/javascript/commons/Bracket.js b/javascript/commons/Bracket.js
index 72b82e98f83..06dacd0457d 100644
--- a/javascript/commons/Bracket.js
+++ b/javascript/commons/Bracket.js
@@ -6,6 +6,34 @@ liquipedia.bracket = {
 	init: function() {
 		liquipedia.bracket.popup.init();
 		liquipedia.bracket.highlighting.init();
+		liquipedia.bracket.headers.init();
+	},
+	headers: {
+		init: function() {
+			liquipedia.bracket.headers.updateAll();
+			window.addEventListener( 'resize', liquipedia.bracket.headers.updateAll );
+		},
+		updateAll: function() {
+			document.querySelectorAll( '.brkts-header-div' ).forEach( ( element ) => {
+				const optionsDivs = Array.from( element.querySelectorAll( '.brkts-header-option' ) );
+				if ( optionsDivs.length === 0 ) {
+					return;
+				}
+				const options = optionsDivs.map( ( div ) => div.textContent );
+				for ( const option of options ) {
+					// Remove existing text/tags (all children that are not .brkts-header-option)
+					Array.from( element.childNodes ).forEach( ( child ) => {
+						if ( !optionsDivs.includes( child ) ) {
+							element.removeChild( child );
+						}
+					} );
+					element.insertBefore( document.createTextNode( option ), element.firstChild );
+					if ( element.scrollWidth <= element.clientWidth ) {
+						break;
+					}
+				}
+			} );
+		}
 	},
 	highlighting: {
 		standardIcons: [
diff --git a/stylesheets/commons/Brackets.scss b/stylesheets/commons/Brackets.scss
index 7c99735235e..0cd08d921ac 100644
--- a/stylesheets/commons/Brackets.scss
+++ b/stylesheets/commons/Brackets.scss
@@ -88,6 +88,10 @@
 	display: none;
 }
 
+.brkts-header-nodisplay {
+	display: none;
+}
+
 .brkts-round-body {
 	display: inline-flex;
 	align-items: flex-start;

From cce12ba466774345747d4955229922251f607afc Mon Sep 17 00:00:00 2001
From: Eetu Rantanen <eeturantanen.dev@gmail.com>
Date: Tue, 27 Jan 2026 16:05:35 +0200
Subject: [PATCH 2/2] add debounce and more efficient updating

---
 javascript/commons/Bracket.js | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/javascript/commons/Bracket.js b/javascript/commons/Bracket.js
index 06dacd0457d..a41a1ab9802 100644
--- a/javascript/commons/Bracket.js
+++ b/javascript/commons/Bracket.js
@@ -11,7 +11,18 @@ liquipedia.bracket = {
 	headers: {
 		init: function() {
 			liquipedia.bracket.headers.updateAll();
-			window.addEventListener( 'resize', liquipedia.bracket.headers.updateAll );
+			window.addEventListener( 'resize', liquipedia.bracket.headers.debounce( () => {
+				liquipedia.bracket.headers.updateAll();
+			}, 100 ) );
+		},
+		debounce: function( callback, wait ) {
+			let timeout;
+			return function( e ) {
+				clearTimeout( timeout );
+				timeout = setTimeout( () => {
+					callback( e );
+				}, wait );
+			};
 		},
 		updateAll: function() {
 			document.querySelectorAll( '.brkts-header-div' ).forEach( ( element ) => {
@@ -20,17 +31,20 @@ liquipedia.bracket = {
 					return;
 				}
 				const options = optionsDivs.map( ( div ) => div.textContent );
-				for ( const option of options ) {
-					// Remove existing text/tags (all children that are not .brkts-header-option)
-					Array.from( element.childNodes ).forEach( ( child ) => {
-						if ( !optionsDivs.includes( child ) ) {
-							element.removeChild( child );
-						}
-					} );
-					element.insertBefore( document.createTextNode( option ), element.firstChild );
-					if ( element.scrollWidth <= element.clientWidth ) {
+
+				Array.from( element.childNodes ).forEach( ( child ) => {
+					if ( !optionsDivs.includes( child ) ) {
+						element.removeChild( child );
+					}
+				} );
+
+				for ( let i = 0; i < options.length; i++ ) {
+					const textNode = document.createTextNode( options[ i ] );
+					element.insertBefore( textNode, element.firstChild );
+					if ( element.scrollWidth <= element.clientWidth || i === options.length - 1 ) {
 						break;
 					}
+					element.removeChild( textNode );
 				}
 			} );
 		}