diff --git a/javascript/commons/Bracket.js b/javascript/commons/Bracket.js
index 72b82e98f83..a41a1ab9802 100644
--- a/javascript/commons/Bracket.js
+++ b/javascript/commons/Bracket.js
@@ -6,6 +6,48 @@ 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.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 ) => {
+				const optionsDivs = Array.from( element.querySelectorAll( '.brkts-header-option' ) );
+				if ( optionsDivs.length === 0 ) {
+					return;
+				}
+				const options = optionsDivs.map( ( div ) => div.textContent );
+
+				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 );
+				}
+			} );
+		}
 	},
 	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;