Page MenuHomePhabricator

Inputbox in its default width overflows on mobile Wikipedia
Closed, ResolvedPublic

Description

Inputbox can not adapt to website width and overflows.

Example

Event Timeline

Dvorapa created this task.Jun 6 2016, 2:05 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 6 2016, 2:05 PM
TheDJ added a subscriber: TheDJ.Jun 6 2016, 7:58 PM

FYI: Please always include a link to where you are encountering such a problem.

The cause seems to be that input elements get a width:auto hint, which make it basically equal to the size attribute. Since the size attribute tells it to be wider than the page, it does so. Can be mitigated by adding max-width: 100% to the element, to tell it to never be wider than it's parent.

Should probably be added to core OOjs UI styling.

TheDJ updated the task description. (Show Details)Jun 6 2016, 8:10 PM

Actually, it appears that his is MediaWiki.UI styling, not OOjs UI styling...

Change 292993 had a related patch set uploaded (by TheDJ):
MediaWiki.UI: Set max-width on inline elements

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

+1
I am just not sure if this change doesn't break anything else, but I am just a regular user, not dev, so I hope it doesn't

Change 292993 merged by jenkins-bot:
MediaWiki UI: Set max-width on .mw-ui-input-inline elements

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

Volker_E closed this task as Resolved.Jun 10 2016, 4:06 AM