Misaligned Icons in VisualEditor

[chrom11]

Setup

• Browsers and versions: Chrome 75
• MediaWiki version: 1.32.3
• Database version: MySQL 5.7.26
• PHP version: PHP 7.2.19
• Pivot version: 2.1.0
• Extension version (if connected to the issue): VisualEditor REL1_32 and Parsoid 0.9.0

Issue

The icons are misaligned when using VisualEditor on the latest version of Pivot. Strangely the issue is inconsistent, it affects certain icons but leaves others alone.

[kghbln]

That's the hot fix for your wiki: CSS diff

[s0rin]

That's great, the hot fix works, but the icons from the dropmenu to toggle from visual to source editing are still misaligned.

[kghbln]

Well, the fix in one location creates the issue in another one. You can use this for better results but be aware that this is still not ideal. However, I do not have more time for this now, meaning you are welcome to fiddle with CSS to get this back on track for a 100%.

/* Fix edit bar of VisualEditor at least for MediaWiki 1.31 and later */
.oo-ui-tool .oo-ui-tool-link {
    padding-top: 0;
}
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel,
.oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
    padding-top: 1em;
}

[BitBangingBytes]

Had this same issue myself, if you just comment out the following lines in /pivot/assets/stylesheets/pivot.css it fixes the issue.

.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link,
.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link  {
    display: inline !important;
}

[kghbln]

@BitBangingBytes Thanks for your solution! So this does not affect other parts of Pivot? Will be great if you could confirm.

If no the CCS should probably just be removed from Pivot as soon as the old version of MW is no longer supported by Pivot.

[BitBangingBytes]

I have been checking all around the wiki and don't see any issues, all the drop downs related to toolbar are fine. If I come across any issues related to this I will post a follow-up comment.

[fredvik]

Thanks @BitBangingBytes it works great for me! I can just add that there are two occurences of the text and both need to be deleted/commented out for the fix to work.

The same issue is present in the Pivot skin and it can be solved in the same way.