Page MenuHomePhabricator

Popups/tooltips in Wikidata interface cause horizontal scrolling on narrow screens
Open, Needs TriagePublicBUG REPORT

Assigned To
None
Authored By
Nikki
Jan 4 2024, 7:18 AM
Project Tags
Referenced Files
F41650211: coordinates.png
Jan 4 2024, 7:18 AM
F41650205: date.png
Jan 4 2024, 7:18 AM
F41650209: quantity.png
Jan 4 2024, 7:18 AM
F41650207: monolingualtext.png
Jan 4 2024, 7:18 AM
F41650203: license.png
Jan 4 2024, 7:18 AM
F41650201: help-tooltip.png
Jan 4 2024, 7:18 AM

Description

Popups/tooltips in the Wikidata interface cause the page to scroll horizontally on narrower screens. It happens in various places:

The tooltip for the help icon (screenshot from https://www.wikidata.org/wiki/Q33216580 at 700px):

help-tooltip.png (700×670 px, 115 KB)

The license popup when editing a statement for the first time (screenshot from the same page):

license.png (700×670 px, 78 KB)

The language selector for monolingual text statements (screenshot from https://www.wikidata.org/wiki/Q44112320 at 800px):

monolingualtext.png (800×670 px, 53 KB)

The unit selector for quantity statements (screenshot from the same page):

quantity.png (800×670 px, 25 KB)

The preview and precision/calendar options for date statements (screenshot from the same page):

date.png (800×671 px, 37 KB)

The map preview and precision options for coordinate statements (screenshot from https://www.wikidata.org/wiki/Q11120461 at 800px):

coordinates.png (800×670 px, 50 KB)

These are all caused by the popup/tooltip being positioned from to the left, even if the window is not wide enough. It should probably check whether the desired left offset plus the maximum width of the popup/tooltip is larger than the width of the window, and if it is, use right: 0 to position it instead.

Event Timeline

right:0 isn’t good on all small screen sizes either: what if the popup is wider than the whole screen? A right:0 would make it overflow – but this time on the left, which means that there’s no scrollbar, the content is simply hidden. So if the popup width is larger than the viewport width, it should once again be left-aligned, although possibly anchored to the left side of the viewport instead of wherever it’s anchored on large screens.