Page MenuHomePhabricator

Formatting issue on tables popular on Geological/Archeological articles
Open, LowPublic

Description

This looks slightly less bad in mobile-html, but it is still not great - for PI to look at.


From OTRS - https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=11325757

Example Articles:
Proterozoic
Cambrian

Steps:

  1. Navigate to article
  2. Scroll to sections with template

Expected:
Text is readable

Actual:
Some overlap and placement issues

Screenshots




Event Timeline

ABorbaWMF created this task.Mar 9 2020, 9:57 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 9 2020, 9:57 PM
LGoto triaged this task as Low priority.Mar 11 2020, 3:36 PM
bearND added subscribers: Johan, bearND.EditedMar 11 2020, 5:01 PM

This issue can be observed when viewing these pages on certain devices in a range of 388px and around 460px. E.g. a Pixel 2 with a width of 411 px does it for the following mobile examples. It doesn't matter whether one views it on mobile web, mobile-html, or mobile-sections.

The Graphical timeline template used in these is not coded to be responsive. It has inline styles on the container element to float to the right, letting the text wrap around it.

HTML:

<div id="Container" class="toccolours searchaux" style="text-align: left; padding:0.5em 0 0 0; border-style:solid; float:right;clear:right; padding:0 0.5em; margin:0.3em 0 0.8em 1.4em; overflow: hidden;">

Wikitext as of revision 897172576:

<includeonly><div id=Container{{{instance-id|}}} class="toccolours searchaux" style="text-align: left; padding:0.5em 0 0 0; border-style:{{#if:{{{embedded|}}}|none|solid}}; {{#if:{{{embedded|}}}||float:{{{align|right}}};clear:{{{align|right}}}}}; padding:0 0.5em; margin:{{#if:{{{embedded|}}}|auto|{{{margin|0.3em}}} {{#ifeq:{{{align|right}}}|right|0|{{{margin|1.4em}}}}} {{{margin|0.8em}}} {{#ifeq:{{{align|right}}}|right|{{{margin|1.4em}}}|0}}}}; overflow: hidden;">

My recommendation would be for template editors to move the inline styles in this template to use TemplateStyles.

MSantos added a subscriber: MSantos.

Moving Template Issues related tasks to the tracking column, please ping us if you think there is anything else that we should act on.