Page MenuHomePhabricator

MobileFrontend weird styling
Closed, DuplicatePublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Be on the mobile domain (any skin)
  • Be at mobile sized resolution (can't reproduce at desktop resolution)
  • Visit the en.wp main page

What happens?:
Lists marked up as hlist are not displayed as hlist

Particularly there at least, links are rendering as centered text with a clear.

Screenshot_20211013-081851.jpg (2×1 px, 884 KB)

Screenshot_20211013-081619.jpg (2×1 px, 466 KB)

What should have happened instead?:
List should be flat with little dots between the items.

Links should be inline, neither cleared nor centered.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:

Firefox mobile up to date for Android.
Current WMF deployment

It's easiest to see on the main page but other pages are having issues with hlist.

Event Timeline

So the links aren't the fault of MF that I can see (this CSS is in TemplateStyles); now hacked around (the template that serves that content *really* needs a flexy overhaul:

body.skin--responsive .mw-parser-output #mp-tfp tr:first-child td:first-child a {
    text-align: center;
    display: table;
    margin: 0 auto;
}

And I can't reproduce the hlist problem on desktop resolution Firefox (or mobile emulator).