Given that other products may be relying on window resize events, I would suggest that Vector just fire a simulated event. There isn't any useful data attached to these UIEvents, so a simulated event isn't going to break any listeners: https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

Calling $(window).trigger('resize') fixes the example in the description.

Change 884289 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Fire a simluated window resize event when toggling limited width

https://gerrit.wikimedia.org/r/884289

The same general issue as T300826, if we're tracking recurring patterns.

The code currently used ($( window ).trigger( 'resize' );) works with jQuery event listeners but not with native listeners,
i.e. it would execute a listener attached using $( window ).on( 'resize', … ), but not a listener attached using window.addEventListener( 'resize', … ).

A more compatible code can be found in sidebarPersistence.js:

var event;
if ( typeof Event === 'function' ) {
    event = new Event( 'resize' );
} else {
    // IE11
    event = window.document.createEvent( 'UIEvents' );
    event.initUIEvent( 'resize', true, false, window, 0 );
}
window.dispatchEvent( event );

Change 884289 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fire a simluated window resize event when toggling limited width

https://gerrit.wikimedia.org/r/884289

I'm assuming editing team will do QA for this one rather than us. Please let me know if that's not correct.

QA steps:

• Visit a page in Vector 2022
• Open the visual editor
• Toggle limited content width using the tiny button in bottom-right corner
• Check that the position and width of the visual editor toolbar reflects the new position and width of the page content
• Also repeat the above: when starting from limited vs unlimited content width when opening the editor; when scrolled down on a long page and opening the editor from the sticky header

In T328121#8615703, @matmarex wrote:

QA steps:

• Visit a page in Vector 2022
• Open the visual editor
• Toggle limited content width using the tiny button in bottom-right corner
• Check that the position and width of the visual editor toolbar reflects the new position and width of the page content
• Also repeat the above: when starting from limited vs unlimited content width when opening the editor; when scrolled down on a long page and opening the editor from the sticky header

Content adjust to the width as expected. Tested with T324043.