Increased font-size (>=20px) causes TOC to overlap text
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Jul 26 2022, 2:58 PM

Description

In Google Chrome if you go to Settings/Appearance (you can get there by putting this in your URL bar chrome://settings/appearance), and increase the font-size to either "Large" or "Very large", then view a Wikipedia article with a table of contents (or with the main menu open), you will see the following:

Large	Very large

QA steps

Test the reported steps in Chrome
In Firefox change the font-size to 20px and check the sidebar doesn't overlap

Notes

This issue does not occur if you use the "Zoom In" feature within the "View" menu:

Screen Shot 2022-07-26 at 10.57.46 AM.png (738×816 px, 355 KB)

Screen Shot 2022-07-26 at 10.58.02 AM.png (2×3 px, 3 MB)

Font size can be changed in Firefox like so:

QA Results - Prod

AC	Status	Details
1	✅	T313817#8230983
2	✅	T313817#8230983

Details

	Subject	Repo	Branch	Lines +/-
	Express sidebar width in pixel for font size	mediawiki/skins/Vector	master	+4 -4

Customize query in gerrit

Related Objects

Mentioned In: T314704: The textbox and article content are larger than the browser window width when using the article source editor
T313587: Sidepanel flows into Wikpedia article content

Event Timeline

• alexhollender_WMF created this task.Jul 26 2022, 2:58 PM

ovasileva triaged this task as Medium priority.Jul 26 2022, 3:00 PM

• alexhollender_WMF raised the priority of this task from Medium to Needs Triage.Jul 26 2022, 3:00 PM

• alexhollender_WMF updated the task description. (Show Details)

Aklapper triaged this task as Medium priority.Jul 26 2022, 3:38 PM

Aklapper mentioned this in T313587: Sidepanel flows into Wikpedia article content.Jul 26 2022, 3:41 PM

Jdlrobson renamed this task from [Chrome bug] Increased font-size causes TOC to overlap text to Increased font-size causes TOC to overlap text.Jul 26 2022, 7:14 PM

Jdlrobson renamed this task from Increased font-size causes TOC to overlap text to Increased font-size (>=20px) causes TOC to overlap text.

Jdlrobson claimed this task.

Jdlrobson updated the task description. (Show Details)

Jdlrobson merged a task: T313587: Sidepanel flows into Wikpedia article content.

Jdlrobson added subscribers: Prototyperspective, Xaosflux.

Prototyperspective awarded a token.Jul 27 2022, 10:17 AM

This can be fixed by switching the grid definition from pixels to ems or rems. REM support is good (pretty much a a guarantee when using CSS grid) https://caniuse.com/rem

Screen Shot 2022-07-27 at 5.30.27 PM.png (1×2 px, 796 KB)

@ovasileva this seems pretty bad to me so suggest treating fixing this as a high priority.

Jdlrobson removed Jdlrobson as the assignee of this task.Jul 27 2022, 4:30 PM

LGoto moved this task from Incoming to Table of Contents on the Desktop Improvements (Vector 2022) board.Jul 27 2022, 4:51 PM

LGoto set the point value for this task to 3.Jul 27 2022, 4:55 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 4 2022, 6:26 AM

LGoto assigned this task to Jdrewniak.Aug 4 2022, 5:06 PM

Jdlrobson merged a task: T313635: Regression: TOC overlaps content area with bigger default font size.Aug 4 2022, 10:25 PM

Jdlrobson added subscribers: Jack_who_built_the_house, Nikki.

Prototyperspective mentioned this in T314704: The textbox and article content are larger than the browser window width when using the article source editor.Aug 6 2022, 11:21 AM

Change 821176 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Express sidebar width in pixel for font size

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

gerritbot added a project: Patch-For-Review.Aug 8 2022, 8:25 AM

Jdrewniak reassigned this task from Jdrewniak to Edtadros.Aug 8 2022, 4:24 PM

Jdrewniak moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdrewniak subscribed.

Change 821176 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Express sidebar width in pixel for font size

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.25; 2022-08-15).Aug 8 2022, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 8 2022, 5:30 PM

ovasileva moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 18 2022, 5:18 PM

QA findings

Testing on https://en.wikipedia.org/wiki/Edward_Ruscha
Macbook Pro

Chrome: Very Large

Screen Shot 2022-08-18 at 5.22.22 PM.png (1×3 px, 1 MB)

Firefox: Font size 20

Screen Shot 2022-08-18 at 5.54.51 PM.png (1×2 px, 741 KB)

Sidebar looks good in Chrome
Sidebar is overlapping in Firefox.

ovasileva moved this task from QA in Prod to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 22 2022, 11:28 AM

Can you look at this again, I think the train was reverted so this shouldn't be a problem now.

Test Result - Prod

Status: ✅ PASS
Environment: dewiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

In Google Chrome if you go to Settings/Appearance (you can get there by putting this in your URL bar chrome://settings/appearance), and increase the font-size to either "Large" or "Very large", then view a Wikipedia article with a table of contents (or with the main menu open), you will see the following:

Test the reported steps in Chrome
In Firefox change the font-size to 20px and check the sidebar doesn't overlap

✅ AC1: In Chrome, the sidebar should not overlap article content

Screen Shot 2022-09-12 at 6.52.56 PM.png (630×1 px, 172 KB)

Screen Shot 2022-09-12 at 6.52.47 PM.png (664×1 px, 190 KB)

Screen Shot 2022-09-12 at 6.48.58 PM.png (730×1 px, 195 KB)

Screen Shot 2022-09-12 at 6.48.42 PM.png (680×1 px, 189 KB)

✅ AC2: In Firefox, the sidebar should not overlap article content

Screen Shot 2022-09-12 at 6.54.21 PM.png (842×1 px, 278 KB)

Screen Shot 2022-09-12 at 6.54.12 PM.png (1×1 px, 435 KB)

Edtadros updated the task description. (Show Details)Sep 13 2022, 1:58 AM

Looks good, resolving

	F35518508: Screen Shot 2022-09-12 at 6.54.12 PM.png
	Sep 13 2022, 1:57 AM

	F35518507: Screen Shot 2022-09-12 at 6.54.21 PM.png
	Sep 13 2022, 1:57 AM

	F35518501: Screen Shot 2022-09-12 at 6.48.42 PM.png
	Sep 13 2022, 1:57 AM

	F35518499: Screen Shot 2022-09-12 at 6.48.58 PM.png
	Sep 13 2022, 1:57 AM

	F35518498: Screen Shot 2022-09-12 at 6.52.47 PM.png
	Sep 13 2022, 1:57 AM

	F35518497: Screen Shot 2022-09-12 at 6.52.56 PM.png
	Sep 13 2022, 1:57 AM

	F35477369: Screen Shot 2022-08-18 at 5.54.51 PM.png
	Aug 19 2022, 2:35 PM

	F35477349: Screen Shot 2022-08-18 at 5.22.22 PM.png
	Aug 19 2022, 2:35 PM

Increased font-size (>=20px) causes TOC to overlap textClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

QA steps

Notes

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Prod

QA Steps

Increased font-size (>=20px) causes TOC to overlap text
Closed, ResolvedPublic3 Estimated Story Points
Actions