Page MenuHomePhabricator

Structured task save dialog on desktop uses different font size and visual display from normal VisualEditor save dialog
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
kostajh
Mar 22 2023, 8:49 PM
Referenced Files
F37145820: Screen Shot 2023-07-21 at 12.19.32 PM.png
Jul 21 2023, 7:20 PM
F37145813: Screen Shot 2023-07-21 at 12.06.40 PM.png
Jul 21 2023, 7:20 PM
F37119967: Screenshot 2023-06-26 at 14.12.47.png
Jun 26 2023, 12:20 PM
F37119965: Screenshot 2023-06-26 at 14.05.15.png
Jun 26 2023, 12:20 PM
F36923082: image.png
Mar 22 2023, 8:49 PM
F36923084: image.png
Mar 22 2023, 8:49 PM
F36923079: image.png
Mar 22 2023, 8:49 PM
F36923076: image.png
Mar 22 2023, 8:49 PM

Description

Steps to replicate the issue (include links if applicable):

What happens?:

DesktopMobile
image.png (920×1 px, 127 KB)
image.png (1×852 px, 112 KB)

What should have happened instead?:

DesktopMobile
image.png (758×1 px, 125 KB)
image.png (1×852 px, 130 KB)

So, mobile interface looks OK, but the desktop one is using a larger font size than the standard VisualEditor save dialog, and that may also be responsible for the several pixel gap between the bottom of the blue "Publish changes" button and the header border.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

kostajh triaged this task as Medium priority.Mar 31 2023, 1:21 PM

Change 931967 had a related patch set uploaded (by Cyndywikime; author: Cyndywikime):

[mediawiki/extensions/GrowthExperiments@master] Fix font size and visual display for Structured task save dialog

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

I think this issue is deeper than just the title font size or the button miss-alignment. The size of all interfaces rendered on VE global overlay should be rendered with a relative size of 0.875em. It seems we're altering the relative font-size inheritance to a point where all interfaces have a bigger font. I think this was introduced while working on T281185 in I4ae24664fa477c0a0d688e2a4015d6a3cc50ce4f. Adding a font-size: 1em to a class that is added to the VE global surface is causing unexpected font-size to the rest of overlay elements: RejectionDialog and SaveDialog that I know.

Screenshot 2023-06-26 at 14.05.15.png (1×3 px, 1 MB)

The reason to introduce that font-size is to match the floating buttons expected size:

Screenshot 2023-06-26 at 14.12.47.png (1×3 px, 1 MB)

This could be solved by removing the conflicting class and targeting with something more specific,

.ve-ui-overlay-global .mw-ge-minimizedToolbarDialogButton {
    font-size: 1.1em;
}

although removing the class when no minimized would be event better.

Change 931967 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Fix font size and visual display for Structured task save dialog

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

Checked on wmf.18 - the fix is in place (the gap at the bottom of .

Screen Shot 2023-07-21 at 12.06.40 PM.png (988×1 px, 148 KB)
Screen Shot 2023-07-21 at 12.19.32 PM.png (742×1 px, 113 KB)