Page MenuHomePhabricator

Special:UserContributions styling problems on mobile due to inline styles
Closed, ResolvedPublic

Description

The damage

The Special:Contributions page has some styling issues

https://en.m.wikipedia.org/wiki/Special:Contributions

Confirmed on iOS


Version: unspecified
Severity: normal

Attached:

20130516180534.PNG (1×640 px, 153 KB)

Details

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:41 AM
bzimport set Reference to bz48544.
bzimport added a subscriber: Unknown Object (MLST).

The form seems to be rendered as a table. If a core change could be made to stop this this would be much more mobile friendly.

Looking closer this is due to a couple of spans with inline styles set to:
white-space: nowrap

These should be moved to classes and redesigned with mobile in mind using media querres .
Try the same page on desktop [1] with the following css rule and note the table spills out of the container:

#bodyContent {
width: 320px;
border: solid 1px #F00;
}

This is therefore not a MobileFrontend bug.

[1] https://en.wikipedia.org/wiki/Special:Contributions?mobileaction=toggle_view_desktop

The offending HTML is as follows:
<td><select class="namespaceselector" id="namespace" name="namespace"><option value="" selected="">all</option><option value="0">(Article)</option><option value="1">Talk</option><option value="2">User</option><option value="3">User talk</option><option value="4">Wikipedia</option><option value="5">Wikipedia talk</option><option value="6">File</option><option value="7">File talk</option><option value="8">MediaWiki</option><option value="9">MediaWiki talk</option><option value="10">Template</option><option value="11">Template talk</option><option value="12">Help</option><option value="13">Help talk</option><option value="14">Category</option><option value="15">Category talk</option><option value="100">Portal</option><option value="101">Portal talk</option><option value="108">Book</option><option value="109">Book talk</option><option value="446">Education Program</option><option value="447">Education Program talk</option><option value="710">TimedText</option><option value="711">TimedText talk</option><option value="828">Module</option><option value="829">Module talk</option></select>&nbsp;<span style="white-space: nowrap"><input name="nsInvert" type="checkbox" value="1" id="nsInvert" title="Check this box to hide changes to pages within the selected namespace (and the associated namespace if checked)" class="mw-input">&nbsp;<label for="nsInvert" class="mw-input" title="Check this box to hide changes to pages within the selected namespace (and the associated namespace if checked)">Invert selection</label>&nbsp;</span><span style="white-space: nowrap"><input name="associated" type="checkbox" value="1" id="associated" title="Check this box to also include the talk or subject namespace associated with the selected namespace" class="mw-input">&nbsp;<label for="associated" class="mw-input" title="Check this box to also include the talk or subject namespace associated with the selected namespace">Associated namespace</label>&nbsp;</span></td>

(In reply to Jon from comment #0)

The Special:Contributions page has some styling issues

https://en.m.wikipedia.org/wiki/Special:Contributions

https://en.m.wikipedia.org/wiki/Special:Contributions now says

No such page
Cannot look at history for a page that doesn't exist. It may have been deleted or you may have followed a bad link.

Is that intended?

Change 307077 had a related patch set uploaded (by Ladsgroup):
[WIP] Rework UserContribs options section

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

Change 307077 merged by jenkins-bot:
Rework UserContribs options section

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

matmarex assigned this task to Ladsgroup.
matmarex removed a project: Patch-For-Review.