The existing version seems to avoid this problem by using absolute-positioning for the toggle link instead of a float. The centered text gets positioned based on the surrounding box size, while the toggle link is absolute-positioned within that same box without interfering with the text flow.

The downside there is that if the title text is long, it will overlap the toggle link, whereas the float version will force the text to wrap down to the next line, around the float.

Yep, absolute position isn't an option imho because of that.

But neither is a fixed width due to the fact that the toggle is not tied to any specific text. For one, the default text depends on the user language. Secondly users can enter a custom toggle and collapse text through data-attributes. And third, it can also be an image or an entirely different element. So setting a width doesn't make sense.

The current navbox model uses a 'fixed' width of 6em for each of the left and right controls to keep the header centered. Using em ensures proper scaling according to font size, and text wraps around it. I don't see why we cannot use the same method in the new collapsible model.

(In reply to comment #2)

Yep, absolute position isn't an option imho because of that.

But neither is a fixed width due to the fact that the toggle is not tied to any
specific text. For one, the default text depends on the user language. Secondly
users can enter a custom toggle and collapse text through data-attributes. And
third, it can also be an image or an entirely different element. So setting a
width doesn't make sense.

Wouldn't be possible for the script itself to check the length of the collapsible toggle text and set the fixed width accordingly?

rexs wrote:

Whatever method is used to resolve this issue, the width needs to be specified in em, since absolute units will cause further problems when the browser window is zoomed.

(In reply to comment #2)

But neither is a fixed width due to the fact that the toggle is not tied to any
specific text. For one, the default text depends on the user language. Secondly
users can enter a custom toggle and collapse text through data-attributes. And
third, it can also be an image or an entirely different element. So setting a
width doesn't make sense.

BTW: Since I was still using "width: 70px;" on my user CSS, I noticed it broke the formatting of my watchlist, because the toggle is an image there.

But, wouldn't the following be a solution?

(In reply to comment #4)

Wouldn't be possible for the script itself to check the length of the
collapsible toggle text and set the fixed width accordingly?

Perhaps you could add absolute positioning as an option:

data-collapsepositioning="absolute"

Just an idea, but maybe there are better ones.

Closing this as WONTFIX. mw-collapsible does not have any CSS associated with it. Any element/template using this feature should incorporate its own local CSS to make the toggle appear and behave as desired.