Page MenuHomePhabricator

New default font size for logged out user causes some UI components to scale (VE, DiscussionTools, WikiEditor, ...)
Closed, ResolvedPublic

Description

The new "standard" font size of 16px is applying to various UI components (especially those embedded in the content area).

This seems unintentional as other parts of the UI are not affected by this setting, and it causes various rendering issues:

  • There are gaps between the Publish buttons and the edge (also the Paragraph dropdown more subtly):
    • image.png (964×88 px, 14 KB)
  • Icons are fuzzy due to being scaled up from a 20px canvas to 22.8px.
image.png (112×101 px, 790 B)
>
image.png (140×139 px, 1 KB)
    • (this issue will affect all OOUI icons)
  • Misalignment of button groups:
    • image.png (119×45 px, 2 KB)
  • Other layout issues
    • image.png (439×207 px, 17 KB)

Event Timeline

There's misalignment in the 2010 wiktiext editor toolbar too, possibly due to the embeeded OOUI buttons on the right:


image.png (1,240×77 px, 28 KB)

Other apps that may be affected by this:

  • DiscussionTools
    • Same as VE, all UI is scaled with the content size
  • ContentTranslation
    • Appears to not respect the font size setting at all, so not affected in the same way currently (cc @santhosh)
  • GrowthExperiments (cc @Urbanecm_WMF)
Esanders renamed this task from New default font size for logged out user causes issues with VE UI to New default font size for logged out user causes some UI components to scale (VE, DiscussionTools, WikiEditor, ...).Sep 4 2024, 10:20 AM

DT example (note how the [edit source] UI component doesn't change size):

image.png (981×559 px, 65 KB)
image.png (995×650 px, 96 KB)

Thanks for the ping, flagged in team chat, so that we can take a look at how this affects us.

Change #1070896 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Use fixed font size for UI componenets in Vector 22

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

Change #1070896 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Use fixed font size for UI componenets in Vector 22

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

Change #1071203 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] Use fixed font size for UI componenets in Vector 22

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

Change #1071212 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Use UI font size for mw-teleport-target

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

Change #1071203 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Use fixed font size for UI components in Vector 22

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

Change #1071212 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use UI font size for mw-teleport-target

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

CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.
CCiufo-WMF subscribed.

Similar to T373989, I think we should consider changes upstream to either OOUI or Codex to address these issues then undo the feature-specific styling overrides.

I don't think there are upstream changes needed here. The fix is to not apply font scaling to interface components in the content area. Unless you plan to start scaling interface components?

CCiufo-WMF raised the priority of this task from High to Needs Triage.Sep 9 2024, 2:19 PM
CCiufo-WMF moved this task from Needs Refinement to Triaging on the Design-System-Team board.

I don't think there are upstream changes needed here. The fix is to not apply font scaling to interface components in the content area. Unless you plan to start scaling interface components?

Okay, I might be misunderstanding what happened here. You're right that the intention is not to scale the interface with the font size preference for now (that's open for discussion in T370549). I think there were still some concerns from DST around use of hardcoded font size values and mw-teleport-target styles. Maybe @egardner can provide some more info.

The .mw-teleport-target applies to Codex dialogs so Codex dialogs are also impacted by this change (I just confirmed this on the dark mode opt in banner overlay - it is now appearing with smaller font sizes).

Change #1072249 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Use base font size for wikitext editors

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

Change #1072250 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Disable font size scaling on Special: pages

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

Change #1072249 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use base font size for wikitext editors

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

Change #1072250 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Disable font size scaling on Special: pages, and other namespaces

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

I don't think there are upstream changes needed here. The fix is to not apply font scaling to interface components in the content area. Unless you plan to start scaling interface components?

Okay, I might be misunderstanding what happened here. You're right that the intention is not to scale the interface with the font size preference for now (that's open for discussion in T370549). I think there were still some concerns from DST around use of hardcoded font size values and mw-teleport-target styles. Maybe @egardner can provide some more info.

@Esanders's patch to style the #mw-teleport-target actually restores the styles that I initially added when I first introduced this element (see T343476 for context). I guess they got removed at some point?

But yes, this feature is used by both OOUI and Codex, and the expected behavior may not be the same in all cases.

In VE, it sounds like OOUI toolbar elements (which should receive the interface font size) are being rendered inside #mw-teleport-target. But I introduced this element to serve a different use-case originally – I wanted Codex dialogs which got launched from the content of a page (like a SpecialPage dashboard UI) to inherit the content font size so that they match their surroundings.

Since this code was originally written, Vector has rolled out user-customizable font sizes, and the distinction between content font sizes (which can change based on user pref) vs interface font sizes (which don't change due to user pref but may change due to skin) has emerged.

Anyway, we will probably need to revisit this once we have a better solution for how to manage all the different font size combinations. I'm hoping that we can leverage CSS variables in a way similar to how we did for dark mode, where we have a small number of font-size tokens whose values can be overridden by skin and/or user pref. But we may still need to account for differences between "interface" and "content" font size if that distinction is going to persist.

In VE, it sounds like OOUI toolbar elements (which should receive the interface font size) are being rendered inside #mw-teleport-target.

Not just VE -- all OOUI dialogs go in the teleport target as-of T348286. It was recommended in T339058#9201151 that it be used as a standard place for overlays, to get away from Vector's changes that were interfering with dialogs.

Also, the toolbars are a separate thing. They're not in the teleport target (unless they're in a dialog that's in the teleport target, which can happen).

@DLynch what do you call the pop-up widgets like "Edit Link" in VE? This was the element that was being rendered in #mw-teleport-target and being improperly sized right?

@egardner that's an inspector (or a context item, which renders very similarly). It's not in the teleport target, though, just in the area affected by content styles like the rest of VE. The only things we put in the teleport target are modal dialogs (e.g. the insert-a-template dialog, the save dialog, etc).

Since the fix hasn't made it out to group2 yet, you can see it affecting a dialog in the teleport target in this screenshot from enwiki:

image.png (2,008×1,468 px, 773 KB)

Change #1072249 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use base font size for wikitext editors

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

For reference, this was the 2010 wikitext editor before this fix:

image.png (1,548×1,090 px, 233 KB)

Change #1073264 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/skins/Vector@master] Teleport target font-size override should be on the ID

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

image.png (1,236×1,250 px, 184 KB)

(I think because when I reviewed the previous teleport patch, the thing I checked that was in the teleport-target had already been fixed by one of the other VE fixes. Oops.)

Change #1073264 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Teleport target font-size override should be on the ID

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

VPuffetMichel claimed this task.
VPuffetMichel removed VPuffetMichel as the assignee of this task.
VPuffetMichel subscribed.