Tables inside divs should not be wrapped in div.noresize
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Jdlrobson
	Jun 12 2024, 12:28 AM

Description

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

Visit https://ru.wikipedia.org/wiki/%D0%A4%D0%BE%D1%80%D0%B0%D0%B4%D0%B0%D0%B4%D0%B0-%D0%B4%D0%B5-%D0%A2%D0%BE%D1%81%D0%BA%D0%B0%D1%80 | this page ]]
Resize browser

What happens?:
The table is being wrapped in a noresize class but this shouldn't happen if the table is itself a direct child of a DIV element.

What should have happened instead?:
The table should not be wrapped with div.noresize as div.ts-wikidata-population-table should act as an opt out.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

Derived Requirement

Ensure that tables within a div.ts-wikidata-population-table are not wrapped with a div.noresize on the MediaWiki sandbox page.

BDD

Feature: Table Wrapping in Sandbox Page

Scenario: Ensure tables inside a div.ts-wikidata-population-table are not wrapped with div.noresize

Given a user is viewing the sandbox page on MediaWiki
When the user resizes the browser window
Then tables within a div.ts-wikidata-population-table should not be wrapped with div.noresize

Test Steps

Test Case 1: Ensure Tables in div.ts-wikidata-population-table are Not Wrapped with div.noresize

Visit MediaWiki sandbox page.
Resize the browser window.
AC1: Confirm that tables inside a div.ts-wikidata-population-table are not wrapped with div.noresize.

QA Results - Prod

AC	Status	Details
1	✅	T367248#10222708

Details

	Subject	Repo	Branch	Lines +/-
	Test case: Tables inside divs should not be wrapped in div.noresize	mediawiki/skins/Vector	master	+17 -0
	Update tables code to only target unwrapped tables	mediawiki/skins/Vector	master	+78 -39

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		bwang	T361737 [EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools
		Resolved	BUG REPORT	ovasileva	T367248 Tables inside divs should not be wrapped in div.noresize

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson mentioned this in T366314: Deploy and QA responsive tables change.Jun 12 2024, 12:49 AM

Not ‘breaks on all skins’, breaks in new Vector specifically because of .noresize class. Works fine for me in regular Vector.

Screenshot 2024-06-11 at 6.09.27 PM.png (1×1 px, 1 MB)

That's how it's supposed to display? Huh. Okay.. I had assumed this shouldn't be floated; the heading shouldn't be overlapping infoboxes; and the [20][21] shouldn't be spilling out in Vector.

But, now I look a bit closer at this, it looks like this is not working to spec. The noresize class shouldn't be kicking in at all as the table has a parent div.ts-wikidata-population-table and we said we wouldn't apply this to tables inside div elements. Retagging.

Jdlrobson renamed this task from [Russian Wikipedia] Template:Wikidata/Population isn't responsive - breaks on all skins to Tables inside divs should not be wrapped in div.noresize.Jun 12 2024, 1:11 AM

Jdlrobson updated the task description. (Show Details)

The caption weirdness on your screenshot seems to be due to trying to fix <caption> issues when a .mw-collapsible table is collapsed (try to remove it: <caption> starts to be displaying one word per line). This should be fixed, yeah. If you know a better way, would be good to fix https://ru.wikipedia.org/wiki/Шаблон:Wikidata/Population/Table/styles.css with it.

There is also some weirdness with how multiple references are displayed, but that I can’t say anything about.

Jdlrobson triaged this task as High priority.Jun 12 2024, 11:23 PM

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

[mediawiki/skins/Vector@master] Test case: Tables inside divs should not be wrapped in div.noresize

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

gerritbot added a project: Patch-For-Review.Jun 12 2024, 11:23 PM

Jdlrobson moved this task from Incoming to FY2023-24 Q4 Sprint 6 on the Web-Team-Backlog board.Jun 12 2024, 11:23 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6); removed Web-Team-Backlog.

Jdlrobson moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 13 2024, 5:07 PM

Jdlrobson added a parent task: T361737: [EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools.Jun 14 2024, 5:47 PM

Jdlrobson mentioned this in T367586: [VISUAL CHANGE] [Config] Enable responsive table behaviour on all skins.

Jdlrobson set the point value for this task to 2.Jun 14 2024, 7:00 PM

ovasileva moved this task from Ready for estimation to Needs analysis on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 17 2024, 4:55 PM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 6).

Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog board.Jun 18 2024, 5:53 AM

Jdlrobson moved this task from Incoming to Groomed on the Desktop Improvements (Vector 2022) board.Jun 20 2024, 5:42 PM

ovasileva moved this task from Groomed to FY2024-25 Q1 Sprint 3 on the Web-Team-Backlog board.Jul 18 2024, 1:17 PM

ovasileva edited projects, added Web-Team-Backlog (FY2024-25 Q1 Sprint 3); removed Web-Team-Backlog.

ovasileva moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2024-25 Q1 Sprint 3) board.Jul 25 2024, 5:38 PM

Jdlrobson lowered the priority of this task from High to Medium.Jul 26 2024, 1:53 AM

Jdlrobson moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2024-25 Q1 Sprint 3) board.

Jdlrobson added a project: Web Team Essential Work 2024.Jul 30 2024, 7:31 PM

Jdlrobson moved this task from Backlog to Roll out Vector 2022 to all remaining wikis on the Web Team Essential Work 2024 board.

Jdlrobson moved this task from Roll out Vector 2022 to all remaining wikis to unused on the Web Team Essential Work 2024 board.Jul 30 2024, 7:36 PM

Jdlrobson moved this task from unused to Improve display of large tables in Vector 2022 and Minerva skins on the Web Team Essential Work 2024 board.Aug 1 2024, 4:23 PM

Jdlrobson edited projects, added Web Team Essential Work 2024 (Improve display of large tables in Vector 2022 and Minerva skins); removed Web Team Essential Work 2024.

Removing from this sprint for the time being so we can better coordinate with related tables work

Change #1042415 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Test case: Tables inside divs should not be wrapped in div.noresize

Reason:

(Moved back to backlog)

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

Jdlrobson added a project: Web-Team-Backlog.Aug 8 2024, 8:20 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 8 2024, 8:31 PM

Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog board.Aug 29 2024, 11:06 PM

Jdlrobson mentioned this in T367629: Table is cut off on Vector 2022 when following a float (potentially entire table is invisible).Sep 6 2024, 10:46 PM

bwang mentioned this in T373590: [Spike] Make plan for tables.Sep 9 2024, 5:34 PM

Jdlrobson mentioned this in T367369: Optimize Vector 2022 for tables with sticky headers.Sep 16 2024, 11:45 PM

ovasileva edited projects, added Web-Team-Backlog (FY2024-25 Q2 Sprint 1); removed Web-Team-Backlog.Sep 19 2024, 9:09 AM

Jdlrobson moved this task from Needs analysis to Ready for Development on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Sep 19 2024, 5:52 PM

ovasileva moved this task from Ready for Development to Needs analysis on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Sep 26 2024, 8:04 AM

ovasileva removed a project: Web-Team-Backlog (FY2024-25 Q2 Sprint 1).Sep 26 2024, 3:07 PM

(This task doesn't need any analysis - it's estimated and good to go. The current state is likely giving a bad impression of the Vector 2022 skin as it breaks certain tables with no way to opt out)

Jdlrobson moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Sep 26 2024, 5:57 PM

ovasileva moved this task from Ready for Development to Ready for estimation on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Sep 26 2024, 5:59 PM

ovasileva moved this task from Ready for estimation to Needs analysis on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.

ovasileva moved this task from Needs analysis to Ready for Development on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.

bwang claimed this task.Oct 1 2024, 3:53 PM

Just to clarify, by default tables will be wrapped by a div 'mw-parser-output', our JS will just have to handle this to not apply noresize when the table is wrapped by another div. this is also different in parsoid, where tables are wrapped by section elements

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Oct 1 2024, 4:00 PM

bwang moved this task from Doing to Ready for Development on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Oct 1 2024, 4:06 PM

Change #1042415 restored by Bernard Wang:

[mediawiki/skins/Vector@master] Test case: Tables inside divs should not be wrapped in div.noresize

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

gerritbot added a project: Patch-For-Review.Oct 1 2024, 4:56 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Oct 1 2024, 5:04 PM

Change #1077462 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update tables code to only target unwrapped tables

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.Oct 3 2024, 10:39 PM

Jdlrobson reassigned this task from bwang to Edtadros.Oct 3 2024, 10:54 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.

Jdlrobson added a subscriber: bwang.

Change #1077462 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update tables code to only target unwrapped tables

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.26; 2024-10-08).Oct 4 2024, 12:00 AM

Edtadros attached a referenced file: F55186395: screenshot 706.png. (Show Details)Oct 4 2024, 7:25 PM

Jdlrobson lowered the priority of this task from Medium to Low.Oct 5 2024, 12:06 AM

Unsure of how to test this in Beta given the table template. Let us know if there are any pages we can test on, or if it's better to just test in prod.

Since this behaviour is disabled in production, we can handle QA for this in production using this page: https://www.mediawiki.org/wiki/User:Jdlrobson/sandbox

Please open both sidebars and then follow the prompts for the three tables. Scrollable = no overlap. The second table in the screenshot is considered "overlap".

Screenshot 2024-10-08 at 6.09.05 PM.png (1×2 px, 403 KB)

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Oct 9 2024, 1:10 AM

GMikesell-WMF claimed this task.Oct 11 2024, 6:27 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF subscribed.

Test Result - Mediawiki

Status: ✅ PASS
Environment: Mediawiki
OS: macOS Sonoma 15.0
Browser: Chrome 129
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Ensure Tables in div.ts-wikidata-population-table are Not Wrapped with div.noresize

Visit MediaWiki sandbox page.
Resize the browser window.
✅ AC1: Confirm that tables inside a div.ts-wikidata-population-table are not wrapped with div.noresize.

As designed per T367248#10212923

2024-10-11_11-30-18.mp4.gif (1×1 px, 3 MB)

GMikesell-WMF removed GMikesell-WMF as the assignee of this task.Oct 11 2024, 8:32 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2024-25 Q2 Sprint 1) board.

Edtadros mentioned this in T375670: Verify 1.43.0-wmf.26 deployment.Oct 13 2024, 2:02 AM

ovasileva closed this task as Resolved.Oct 14 2024, 10:19 PM

ovasileva claimed this task.

Change #1042415 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Test case: Tables inside divs should not be wrapped in div.noresize

Reason:

Done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1077462

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

Edtadros added a project: Verified.Oct 16 2024, 1:17 AM

Edtadros updated the task description. (Show Details)

	F57599598: Screenshot 2024-10-08 at 6.09.05 PM.png
	Oct 9 2024, 1:10 AM

	F55251192: Screenshot 2024-06-11 at 6.09.27 PM.png
	Jun 12 2024, 1:10 AM

Tables inside divs should not be wrapped in div.noresizeClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

Derived Requirement

BDD

Test Steps

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Mediawiki

Test Steps

Tables inside divs should not be wrapped in div.noresize
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...