Page MenuHomePhabricator

Add display exception for tables in infobox while they are displaying on mobile phone
Closed, DeclinedPublic

Description

While the screen is narrower than 720 px, the MinervaNeue skin usually used display:block property for <table> and <caption> elements if a table is very large than screen, but this may cause problems in infobox, making sub table narrower and shift to left even if you set width:100% property. This happened in various infoboxes while you see them on your phone.

Some examples can be seen here:
https://en.m.wikipedia.org/wiki/Bagua (the "Transcriptions" area is compressed and shift to left)
https://es.m.wikipedia.org/wiki/Barcelona (both flag and coat of arms shift to left)
(If you don't use mobile phone to view, you can try to open with https://www.responsinator.com to reproduce.)

To fix that, I proposed to add the following rules into MinervaNeue skin to add exceptional display of such tables:

@media all and (max-width: 720px) {
	.infobox table {
		display: table;
	}
	.infobox caption {
		display: table-caption;
	}
}

Event Timeline

ovasileva added a project: Web-Team-Backlog.
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.
Jdlrobson lowered the priority of this task from Low to Lowest.Jul 21 2021, 7:31 PM
Jdlrobson subscribed.

I would suggest a fix in the template first. After that, we can consider updating these rules or removing them altogether from Minerva.

This is simply because the templates in question use a sub table. Avoid nesting tables and use proper CSS and the issue should go away.