On the main page the collapse happens much later than it does on other articles. The tabs are overlapping the heading on the main page for me without even adding the new link.

both screenshots were taken without running the code in the task description

Main page	Article

If I understand correctly the problem is that the tabs overlap content on thin windows, right? (Regardless of the snippet on the description)

Adding Design in case there's some input here.

In T139830#2560999, @Jhernandez wrote:

If I understand correctly the problem is that the tabs overlap content on thin windows, right? (Regardless of the snippet on the description)

The problem is, that they overlap, even though everything would look fine if one tab gets collapsed as usual.

addPortletlink, should trigger an event, to signal that it has changed something, Vector's collapsible tabs should listen for that event in order to be able to recalculate if all tabs fit the available width (it already does this on window.onresize).

One option is just to have addportletlink trigger a window resize event, but since many things might be listening for that, that could create a little bit too much overhead ?

Probably some custom DOM event on the specific portlet root could work. Somewhat similar to what we do in ajax.watch.js

Change 727618 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Vector should be notified by addPortletLink to collapsible where needed

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

Replication steps:

Visit https://en.wikipedia.org/wiki/Balinese_language?safemode=1&useskinversion=1 incognito window
Make sure no more menu and resize so it looks like this:

Run code in developer console

mw.util.addPortletLink( 'p-cactions', '#',
	'My new portlet link', 'ca-my-portlet',	'Click here to test the new portlet'
);

Actual:

Expected:

What happens here is that the calculation assumes that it should 'collapse' to the menu when the outside of Read hits/collides with the outside of talk. But because here the width between Talk and the Read tab is smaller than the width of the More menu, after inserting the Menu, the tabs have already overlapped, and the CSS forces it to the next line, which the calculation doesn't account for.

In the past the tabs couldn't drop to the next line and would simply overlap. This drop to the next line CSS was added to Vector much later, but the script wasn't updated to take this very specific situation into account.

@TheDJ are you saying I've misunderstood this and that https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/727618/ doesn't fix the issue?

Change 727618 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Vector should be notified by addPortletLink to collapsible where needed

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