I just checked WP:SANDBOX on enwiki, and p-cactions header there is also one pixel shorter than the usual form of it.

Thanks for the report! I am unable to replicate or understand this bug, so I need some more information.

1. What screen resolution are you seeing this bug on?

2. Does this issue occur on https://th.wikipedia.org/wiki/หน้าหลัก?useskinversion=1&uselang=th&safemode=1 ?

3. If the issue does not occur with above URL, what gadgets are enabled on https://th.wikipedia.org/wiki/%E0%B8%9E%E0%B8%B4%E0%B9%80%E0%B8%A8%E0%B8%A9:%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B8%84%E0%B9%88%E0%B8%B2#mw-prefsection-gadgets (screenshot or list would be helpful) ?

Desktop improvements = the new version of Vector. This bug relates to the old version so removing Desktop Improvements (Vector 2022) tag.

In T294883#7478115, @Jdlrobson wrote:

Thanks for the report! I am unable to replicate or understand this bug, so I need some more information.

1. What screen resolution are you seeing this bug on?

2. Does this issue occur on https://th.wikipedia.org/wiki/หน้าหลัก?useskinversion=1&uselang=th&safemode=1 ?

3. If the issue does not occur with above URL, what gadgets are enabled on https://th.wikipedia.org/wiki/%E0%B8%9E%E0%B8%B4%E0%B9%80%E0%B8%A8%E0%B8%A9:%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B8%84%E0%B9%88%E0%B8%B2#mw-prefsection-gadgets (screenshot or list would be helpful) ?

Desktop improvements = the new version of Vector. This bug relates to the old version so removing Desktop Improvements (Vector 2022) tag.

1. My screen resolution is 1920x1080 with 125% scaling, but this bug happens if the screen width is very small that tabs need to be collapsed, as shown below.

2. It does, as above.

And the same happens with enwiki (using the same way) too! But less noticeable because the "More" text fits inside the smaller space.

Adding back Desktop Improvements (Vector 2022) tag because this bug also occurs there too.

I removed all the gadget, only adding importScript('User:Bebiezaza/iScript/main.js'); to my common.js page. This is testable only in pages that don't have the p-cactions tab and not a home page, because I prevent this userscript from showing tabs inside the home page, so testing in WP:SANDBOX is the easiest in all cases.

This is enwiki in new vector, with Twinkle enabled, and I altered the twinkle menu label to be longer.

The width of "More" menu is smaller than usual here

because when I disabled the style="width: 60.625px;", the button expands out a little bit.

(May need pixel counting to see it being different here)

The same above applies to enwiki in legacy vector too with Twinkle enabled too.

(May need pixel counting to see it being different here)

The list of gadgets I enabled in enwiki:

• 1 to 11) All default gadgets
• 12) Twinkle
• 13) HotCat

We only support the case where gadgets and user scripts/styles are disabled. If there's bugs with Twinkle etc, those will need to be addressed inside those gadgets/scripts.

I'm starting to wonder if this is a browser bug. Perhaps this is language + Operating system or browser specific. What operating system / browser are you using?

I cannot replicate this without gadgets on Chrome or Firefox on Mac.
This is what I'm seeing:

Are you able to replicate this on English Wikipedia without gadgets enabled?

You need to do it in https://th.wikipedia.org/wiki/WP:SANDBOX with no administrator rights as there should be no “เพิ่มเติม” tab present before shrinking the page’s width.

This is replicable in both enwiki and thwiki without any gadgets and scripts enabled, but it’s less noticeable in enwiki. I’m using Chrome in Windows 10.

This bug is also replicable in Safari in 9.7” iPad with iPadOS 14.8 and English localization and no gadgets enabled.

I have created 4 comparison tables between multiple configurations, with safemode enabled, without any gadgets or user scripts, and without any special permissions other than users and autoconfirmed. All of them present the same bug, being that the width of p-cactions from collapsed p-views is smaller than normal p-cactions by 1px.

The texts in red are the width of p-cactions for each of the pictures. The 4 tables are as follow:

1. Legacy Vector in Chrome comparing NS:0 (#p-cactions present since the beginning) and NS:6 (#p-cactions present only after shrinking the width),

2. Legacy Vector in Firefox comparing NS:0 (#p-cactions present since the beginning) and NS:6 (#p-cactions present only after shrinking the width),

3. New Vector in Chrome comparing NS:0 (#p-cactions present since the beginning) and NS:6 (#p-cactions present only after shrinking the width),

4. New Vector in Firefox comparing NS:0 (#p-cactions present since the beginning) and NS:6 (#p-cactions present only after shrinking the width),

From looking into the code and messing around with inspect element, I have found out that the reason p-cactions is smaller than usual by 1px is that the code gets the width of p-cactions nav, which is already correct, but it puts the width scaling into h3 element, which has margin-right:-1px in it, which makes the width calculation off by 1px. From my calculation, this is correct because

and 71.412px is equal to the comparison table photo above in Legacy Vector in Chrome in Thai Wikipedia in NS:6.

I have devised two fixes for this problem although I have done it in MW version 1.35.2, so some additional changes are expected. The first method is more destructive than the latter:

1. Editing the MenuDropdown.less file (more destructive)

The reason this is more destructive is that this expands all the dropdown menu sizes, which could break other kinds of stuff.

In MenuDropdown.less at line 118-129 (#mw-head .vector-menu-dropdown h3), change the margin property in line 123 to all 0.

Diff

	#mw-head .vector-menu-dropdown h3 {
	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
	background-position: right bottom;
	float: left;
	height: unit( 40 / @font-size-tabs / @font-size-browser, em );
-	margin: 0 -@border-width-base 0 0;
+	margin: 0;
	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
	// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
	// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
	// `padding-left` in `.vector-menu-dropdown h3 a`
	padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
}

2. Editing the vector.js file (less destructive)

The reason this is less destructive is that this only affects the invisible #p-cactions dropdown menu size.

In vector.js at line 26-52 ( $tabContainer.on('beforeTabCollapse') and $tabContainer.on('beforeTabExpand') )

1. change line 38 from $cactions.find( 'h3' ) to $cactions
2. change line 47 from $cactions.find( 'h3' ).animate( { width: '1px' }, 'normal', function () { to $cactions.animate( { width: '1px' }, 'normal', function () {
3. and (this part does not exist in the current code anymore) change line 50 from .parent().addClass( 'emptyPortlet vector-menu-empty' ); to .addClass( 'emptyPortlet vector-menu-empty' );
   1. From reading the current code, I assume that this does not need any changes

Diff

After

		$tabContainer
		.on( 'beforeTabCollapse', function () {
			var expandedWidth;
			// If the dropdown was hidden, show it
			if ( !mw.util.isPortletVisible( cactionsId ) ) {
				mw.util.showPortlet( cactionsId );
				// Now that it is visible, force-render it virtually
				// to get its expanded width, then shrink it 1px before we
				// yield from JS (which means the expansion won't be visible).
				// Then animate from the 1px to the expanded width.
				expandedWidth = $cactions.width();
				// eslint-disable-next-line no-jquery/no-animate
-				$cactions.find( 'h3' )
+				$cactions
					.css( 'width', '1px' )
					.animate( { width: expandedWidth }, 'normal' );
			}
		} )
		.on( 'beforeTabExpand', function () {
			// If we're removing the last child node right now, hide the dropdown
			if ( $cactions.find( 'li' ).length === 1 ) {
				// eslint-disable-next-line no-jquery/no-animate
-				$cactions.find( 'h3' ).animate( { width: '1px' }, 'normal', function () {
+				$cactions.animate( { width: '1px' }, 'normal', function () {
					$( this ).attr( 'style', '' );
					mw.util.hidePortlet( cactionsId );
				} );
			}
		} )

I am sorry if this is not the best way to type this kind of information out.

EDIT1: actually found a way to make code block display fewer lines.
EDIT2: finally using diff language.

I've only looked at this briefly, but would setting white-space: nowrap; CSS be sufficient for preventing the label from breaking onto two lines?
e.g.

.vector-menu-dropdown-noicon h3 {
    white-space: nowrap;
}

@Jdrewniak just tried that CSS out and yep that seems to fix this!

Yes, it fixed the text displaying, but the nav size is still one pixel narrower than normal.

Change 751803 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix caction menu button from having a width that's 1px too small

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

Change 751803 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix caction menu button from having a width that's 1px too small

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

In an incognito window, visit https://en.wikipedia.beta.wmflabs.org/wiki/?useskinversion=1&uselang=th
Resize browser to around 586px.
✅ AC1: Ensure the more menu button expands and collapses as normal