Page MenuHomePhabricator

How much control do editors have over table alignment in mobile?
Closed, ResolvedPublicBUG REPORT

Description

Per @Snaevar's suggestion, I'm reporting the following bug:

Wikitables set with a global alignment in style will show headers centralised on desktop and according to that global alignment on mobile.

Compare Minerva Example with Vector Example:

Screen Shot 2020-01-07 at 3.09.49 PM.png (1×1 px, 408 KB)
Screen Shot 2020-01-07 at 3.10.07 PM.png (1×2 px, 443 KB)

Steps to Reproduce:

Set style=text-align:right (or left) at the wikitable declaration line. Check whether headers are right (or left) aligned on both desktop and mobile modes.

Actual Results:

Headers show centered on desktop, and aligned right (or left) on mobile.

Expected Results:

Being used to editing WP in desktop mode, I expect headers to be centered on mobile mode as well (unless specifically told otherwise). But I could also get used to the reverse convention: global style applies to all, including headers, which are easy to recenter with a row style, if need be.

QA Results - Beta

ACStatusDetails
1T240106#7111224
2T240106#7111224

QA Results - Prod

ACStatusDetails
1T240106#7111375
2T240106#7111375

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson renamed this task from Discrepancy in table header alignment between desktop and mobile to How much control do editors have over table alignment in mobile?.Jan 7 2020, 11:07 PM

Over to @alexhollender I think this is by design given all tables are centered in Minerva but we may want to rethink/revisit the implementation.

Jdlrobson updated the task description. (Show Details)

This is just because Minerva uses it's own wikitable style rules and doesn't set an explicit th text-alignment like the generic wikitable.styles do. This really should be fixed indeed, because table cells inherit text alignment from their parent and are thus easily accidently overriden by setting an alignment on the table or row element.
Even if Minerva has/wants a different design, it should make that design explicit by setting the text alignment on the th cells.

Change 685389 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/skins/MinervaNeue@master] Set a fixed table header text-alignment

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

I've added a quick patch. I've forced center alignment as that is the UA default for th. This is the same behaviour as before, but simply made explicit.

agreed that the centered table headings are preferable cc @Volker_E

ovasileva triaged this task as Medium priority.May 5 2021, 5:14 PM

Change 685389 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Set a fixed table header text-alignment

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

Currently, the default header text alignment on both desktop and mobile is centered. That should remain.

Some people have probably added style=text-align:center to header rows in order to deal with the mobile view problem of being effected by global right or left alignment.

I think mobile should also not be effected by global alignment styling. Same as on desktop.

This way it is not a problem that style=text-align:center has already been added to header rows in some tables.

Test Result - Beta

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

Test Artifact(s):

QA Steps
  1. Go to https://en.wikipedia.beta.wmflabs.org/wiki/T240106#Campaign_finance

✅ AC1: table headers should be centered horizontally

Screen Shot 2021-05-25 at 6.47.24 AM.png (1×1 px, 369 KB)

  1. Toggle to mobile view

✅ AC2: table headers should be centered horizontally

Screen Shot 2021-05-25 at 6.47.54 AM.png (1×1 px, 334 KB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps
  1. Go tohttps://en.wikipedia.org/wiki/2020_Democratic_Party_presidential_primaries#Campaign_finance

✅ AC1: table headers should be centered horizontally

Screen Shot 2021-05-25 at 7.29.35 AM.png (1×1 px, 393 KB)

  1. Toggle to mobile view

✅ AC2: table headers should be centered horizontally

Screen Shot 2021-05-25 at 7.30.05 AM.png (1×1 px, 388 KB)

NOTE: I also validated this with the two example links in the description.

Thanks! Header text now stays centered in both desktop and mobile view unless specifically changed per header cell. I checked in Firefox and Chrome.

I removed style=text-align:center from all the header cells in the header rows at the top here:
*https://en.wikipedia.org/wiki/User:Timeshifter/Sandbox147

Check the page in both desktop and mobile views. Header text in the top header rows is centered in both views. It is not effected by the global right alignment styling in the top line of the table wikitext.

The bottom header rows have text alignment set specifically for each header cell. That text alignment is not overridden by the global text alignment.