Change 903639 had a related patch set uploaded (by Sarah Mukuti; author: Sarah Mukuti):

[mediawiki/extensions/WikiEditor@master] modules/jquery.wikiEditor.toolbar.less: modify padding for toolbar.

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

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

It seems this patch inadvertently hides the border entirely, even when the Preview button is displayed

Before

After

It might be worth looking at the

.wikiEditor-ui-toolbar .section-secondary .group {
	padding-right: 0;
	padding-left: 6px;
	border-left: 1px solid #c8ccd1;
}

rule, and thinking about how we could target that .section-secondary .group when the button is hidden (via CSS class oo-ui-element-hidden).

• https://www.geeksforgeeks.org/how-to-apply-style-to-parent-if-it-has-child-with-css/

@TheresNoTime not having the border next to the Preview button (After visual) looks like a pretty subtle change which I assume most of the users wouldn't even notice. If it's too much of an effort, we can leave it that way.

I think the root problem here is not that the preview button has a border, but that the VisualEditor switcher (.ve-init-mw-editSwitch) has one. This is because the switcher was added before the new secondary group in WikiEditor and so didn't have any way of putting a widget at that end of the toolbar.

The more fundamental fix here I think is for VE to stop prepending its element to the toolbar and instead add it in the normal WikiEditor way. Then, there will only be one group at that end, and thus only one border. It should also simplify VE's styles a little bit (no floating required).

Change 994189 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/VisualEditor@master] editSwitch: Use secondary group for WikiEditor switch menu

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

Change 994391 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Use flexbox for toolbar group items

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

I've had a look at moving VE's switcher to use the standard system of adding toolbar items, and adapting WikiEditor to make element type items display better when there are multiple within one section.

Both patches ready for review, if anyone has time.

Here's an example that demonstrates the issue with multiple block-level toolbar items. The 'One' and 'Two' items should be displayed next to each other, but they're stacked vertically.

mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
	$textarea.wikiEditor( 'addToToolbar', {
		section: 'secondary',
		group: 'default',
		tools: {
			tool1: {
				type: 'element',
				element: $('<div>').text('One')
			},
			tool2: {
				type: 'element',
				element: $('<div>').text('Two')
			}
		}
	} );
} );

Change 994391 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Use flexbox for toolbar group items

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

The VisualEditor patch above is ready for review now. @JSengupta-WMF has looked at the design (with the two buttons in the same group and so missing the middle grey bar) and has said that it looks correct.

Change 994189 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] editSwitch: Use secondary group for WikiEditor switch menu

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

Change 903639 abandoned by Samwilson:

[mediawiki/extensions/WikiEditor@master] modules/jquery.wikiEditor.toolbar.less: modify padding for toolbar.

Reason:

Superseded by Ic307f9dc7ad976862c8d8c6551ed29e6071f655f

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

@Samwilson When VE is installed and the screen is narrow enough that the Preview button is hidden, the double boarder does not show as seen in the screenshots and .webms. This will be moved to Done. Thanks for all your work!

Status: ✅PASS
Environment: Beta: 1.42.0-alpha (d5ff499)
OS: macOS Sonoma 14.2.1
Browser: Chrome 121, Firefox 123, Safari 17.3, Edge 121
Skins. Vector 2022, Vector 2010, Minerva, Monobook, Timeless
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog#

✅AC1: https://phabricator.wikimedia.org/T308423

Vector 2022	Vector 2010	Minerva	Monobook	Timeless	Timeless-he

In T308423#9500945, @gerritbot wrote:

Change 994391 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Use flexbox for toolbar group items

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

This has caused T357222: Wikitext-related toolbar buttons are visible even when CodeEditor is on.