Page MenuHomePhabricator

table of contents icon in wrong position on articles with long titles
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT

Description

Hi. When reading wiki pages with long titles e.g. https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%81%D1%83%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0:%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%85%D0%B5%D0%BC%D0%B0_%D0%9C%D0%BE%D1%81%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%BE%D0%B3%D0%BE_%D0%BC%D0%B5%D1%82%D1%80%D0%BE%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B5%D0%BD%D0%B0/%D0%BF%D0%B5%D1%81%D0%BE%D1%87%D0%BD%D0%B8%D1%86%D0%B0/data.json, TOC is opened on the opposite direction from the needed, and it destroys the page layout.

+-----------+
|         TOC---------+
|          |          |
|          +----------+
|           |
|           |
+-----------+

<-----------> expected page width
<---------------------> real page width

e.g.

Screenshot 2023-05-01 at 12.07.12 PM.png (619×1 px, 155 KB)

  • Open some page.
  • Hide Main menu, Tools Menu, TOC.
  • Close the page.
  • Open some page with TOC.
  • Expected: The page width is the same as the window width.
  • Got: The page gets much smaller font, because there is a large grey area where the TOC is hidden.
  • If one scrolls the page down, changing the TOC button location, the problem disappears.

For example, on LTR pages clicking on TOC rolls it down and right, and because the button is on the right side of the page, most of the TOC is out of the page. It should be mirrored, to open down and left, inside the page.

Other information (browser name/version, screenshots, etc.): I couldn't upload the Samsung Internet video here, it has more than 4MB, so it's on there instead for 30 days, hope it's enough time.

TODO

  • Fix bug
  • Add Pixel regression test so this doesn't happen again

QA Steps

Environment: Beta
On any page with a long title (i.e one that spans two or more lines) ensure that the TOC button is to the left of the title, and the language button is to the right of the title.

QA Results - Beta

ACStatusDetails
1T335633#8828708

QA Results - Prod

ACStatusDetails
1T335633#8839102

Event Timeline

UPD: Removed "narrow screen" from the description, it's everywhere now.

Thanks for the report! Could you share the URL to the above page?
The table of contents icon should be on the left so I'm not 100% sure what's happening here but it looks like it may relate to the length of the title

Jdlrobson renamed this task from Mirror TOC to table of contents icon does not appear to left of page title on long articles .May 1 2023, 3:58 PM
Jdlrobson triaged this task as High priority.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Web-Team-Backlog.
Jdrewniak renamed this task from table of contents icon does not appear to left of page title on long articles to table of contents icon in wrong position on articles with long titles.May 1 2023, 4:08 PM
Jdrewniak updated the task description. (Show Details)

Change 913972 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [Regression] Prevent ToC & language button in header from wrapping

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

Change 913972 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Regression] Prevent ToC & language button in header from wrapping

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

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

On any page with a long title (i.e. one that spans two or more lines) ensure that the TOC button is to the left of the title, and the language button is to the right of the title.

Screenshot 2023-05-04 at 8.43.42 PM.png (1×2 px, 1 MB)

Edtadros removed ovasileva as the assignee of this task.
Edtadros added a subscriber: ovasileva.

Test Result - Prod

Status: ✅ PASS
Environment: ruwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On any page with a long title (i.e. one that spans two or more lines) ensure that the TOC button is to the left of the title, and the language button is to the right of the title.

Screenshot 2023-05-09 at 3.54.28 PM.png (843×1 px, 376 KB)