People often need to use the desktop site on mobile devices, e.g. because it's not possible to edit statements on the mobile site (see T95878), because Wikimedia's mobile sites are missing most of the links available on the desktop sites, because most gadgets are not designed for Minerva, etc.
Wikidata's CSS currently contains things which make the desktop site very difficult to use on narrower screens. Some adjustments, e.g. to use media queries to selectively apply styles, could make the desktop site much better on narrower screens.
Some specific issues:
- The sitelink sections are a fixed width, which causes horizontal scrolling
- The property labels take up a lot of horizontal space
- The edit toolbars are a fixed width, which causes the statement values/input fields to be too narrow
- The sidebar can't be hidden in the Vector skin, which takes up a lot of horizontal space
- The Vector and Vector 2022 skins are not responsive/mobile-friendly, which causes the page to be zoomed out
1:
.wikibase-sitelinkgroupview currently has width: 30em. Changing that to the following seems to behave the same on wider screens while not causing horizontal scrolling on narrower screens:
.wikibase-sitelinkgroupview { max-width: 30em; width: 100%; }
2 and 3:
Property labels could be shown above the list of statements (similar to what the mobile site does) when the page width is below a certain width.
The rest of the statement section could use media queries and/or CSS grids to adjust the layout.
Examples:
The first section of https://www.wikidata.org/wiki/User:Nikki/narrow.css has some CSS to display the property labels above the list of statements, the third section adjusts the layout of statements to be more usable (although not very pretty) on a narrower screen.
It's not designed for narrower screens but CSS grids are also used by https://www.wikidata.org/wiki/MediaWiki:Gadget-compact_items.css (the grid styles are in https://www.wikidata.org/wiki/MediaWiki:Gadget-gridify.css)
4 and 5:
Minerva, Timeless and Monobook all already work fine and Vector 2022 explicitly does not support narrower screens (link), so the following is specific to Vector:
- Adding <meta name="viewport" content="width=device-width, initial-scale=1"> would stop it from zooming out by default.
- A sidebar toggle could be added. The Translate extension already has one (see Special:Translate) which could be reused or adapted.
- Making the sidebar overlay the content (by removing the margin which is reserved for it) would make the menus/tabs display better.
- The "Read" tab could be hidden to save space, since it's the same as the first tab.
Example: https://www.wikidata.org/wiki/User:Nikki/VectorMobile.js (which also loads https://www.wikidata.org/wiki/User:Nikki/VectorMobile.css)
This could be changed using a gadget specific to Wikidata or changed in the Wikibase extension (like the Translate extension does) so other Wikibases can benefit too.
