Minerva mobile: non-ASCII char in section heading cause bigger margin
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Msz2001
	Apr 29 2022, 3:10 PM

Description

List of steps to reproduce (step by step, including full links if applicable):

Use a mobile site (problem is not visible on the desktop Minerva version)
Visit a page in language that uses non-ASCII letters (for example: https://pl.m.wikipedia.org/wiki/Wikipedia:Kawiarenka/Nazewnictwo - it's on the screenshot)
Make sure the section headers are collapsed to see the problem well

What happens?:
A header that contains at least one letter from outside of the basic ASCII set is inset to the right by 8px. This makes the page look very inconsistent.

What should have happened instead?:
The margin between chevron icon and the header text should be the same, no matter what text was provided.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Details

	Subject	Repo	Branch	Lines +/-
	MWUI: Don't add post-icon margin to empty spans	mediawiki/core	master	+2 -1

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		• alexhollender_WMF	T301056 Have consistent spacing between icon and text label in all menus
		Resolved	BUG REPORT	ppelberg	T307233 Minerva mobile: non-ASCII char in section heading cause bigger margin

Event Timeline

Msz2001 created this task.Apr 29 2022, 3:10 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptApr 29 2022, 3:10 PM

@Esanders I haven't looked into this but wondered if your changes to section headings may be related or if this is a pre-existing issue.

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Apr 29 2022, 10:12 PM

Non-ascii characters triggers trigger an empty span which contains the ID with URL encoding. This span triggers the .mw-ui-icon + span rule in Minerva which adds 8px margin. That rule does seem overlay generic and we've had to adjust for it in quite a few places. It was only added a year ago (T292452) so this might be a good time to make it more specific.

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

[mediawiki/core@master] MWUI: Don't add post-icon margin to empty spans

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

gerritbot added a project: Patch-For-Review.Apr 30 2022, 10:43 PM

Related: T301056

@alexhollender_WMF - any thoughts on the priority on this from a design perspective?

Change 787878 merged by jenkins-bot:

[mediawiki/core@master] MWUI: Don't add post-icon margin to empty spans

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

This above uses a :not( :empty ) selector to fix this case in the task, but it would be preferable if the labels required an specific class to get the left margin.

Maintenance_bot removed a project: Patch-For-Review.May 3 2022, 5:30 PM

@Esanders can editing team please QA this one, as we don't have bandwidth to look at this one right now.

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.12; 2022-05-16).May 3 2022, 6:00 PM

matmarex moved this task from Incoming to QA on the Editing-team (Kanban Board) board.May 4 2022, 12:51 AM

matmarex added a project: Editing QA.

to clarify the issue, here is what I'm seeing on mobile:

@Msz2001 the screenshot in the description is confusing to me because the blue line isn't straight. can you confirm if the issue you're describing is the title "Most drewniany z 1500 roku w Toruniu" being closer to the arrows than the other headings?

@Jdlrobson in either case the urgency here doesn't seem very high to me

@alexhollender_WMF Yes, the issue is that the title "Most drewniany..." is closer to the arrows. Sorry for drawing the line not exactly vertical.

• alexhollender_WMF updated the task description. (Show Details)May 4 2022, 3:18 PM

Jdlrobson merged a task: T307831: Non-ascii characters in section on mobile/Minerva are causing extra gaps.May 7 2022, 6:41 PM

Jdlrobson added a subscriber: Nux.

Jdlrobson merged a task: T307850: Headings containing special characters get additional margin-left in mobile version.May 8 2022, 3:54 PM

Jdlrobson added subscribers: XanonymusX, Wurgl.

Testing with https://en.wikipedia.org/w/index.php?title=User_talk%3AEAkinloose_%28WMF%29%2Fsandbox#Normal_Ascii_test and https://en.m.wikipedia.beta.wmflabs.org/wiki/User_talk:TestEsther

Spacing is consistent across headings with/without ASCII and non-ASCII characters as expected.

Before fix:

After fix:

EAkinloose edited projects, added Verified; removed Editing QA.May 11 2022, 11:13 PM

EAkinloose moved this task from QA to Ready for Sign Off on the Editing-team (Kanban Board) board.

(I think your "before" and "after" labels are reversed :) )

In T307233#7922864, @Esanders wrote:

(I think your "before" and "after" labels are reversed :) )

Fixed. Thanks for pointing it out.

• alexhollender_WMF awarded a token.May 16 2022, 5:18 PM

Jdlrobson mentioned this in T308460: Extra space between expander and headings when using diacritics (due to separate empty <span>).May 16 2022, 8:44 PM

• Esanders merged a task: T308460: Extra space between expander and headings when using diacritics (due to separate empty <span>).May 16 2022, 10:56 PM

• Esanders added subscribers: Hiro, Bas_dehaan.

Snaevar subscribed.May 16 2022, 11:30 PM

Ennomien subscribed.May 17 2022, 5:24 AM

ppelberg closed this task as Resolved.Jun 3 2022, 11:26 PM

ppelberg claimed this task.

	F35131860: IMG_5334.PNG
	May 11 2022, 10:55 PM

	F35131861: IMG_5333.PNG
	May 11 2022, 10:55 PM

	F35102794: image.png
	May 4 2022, 3:06 PM

Minerva mobile: non-ASCII char in section heading cause bigger marginClosed, ResolvedPublicBUG REPORTActions

Description

Details

Related ObjectsSearch...

Event Timeline

Minerva mobile: non-ASCII char in section heading cause bigger margin
Closed, ResolvedPublicBUG REPORT
Actions

Related Objects
Search...