I’ve noticed that the MusicBrainz documentation pages are quite hard to use on my phone (393x851 viewport at 2.75 pixel density, both Chrome 105 and Firefox 105). The pages are much wider than the browser’s viewport, so my options seem to be:
- scrolling horizontally while reading each line
- zooming way out, making the text too small to read
- putting my phone in landscape mode, making the text small but somewhat readable
For example, here’s what https://musicbrainz.org/doc/Style/Recording looks like:
(I captured those screenshots in Chrome devtools on a laptop, but the page looks similar on my phone.)
This looks like it’s happening due to a min-width: 780px CSS property on the <body> element. Disabling that property breaks many things (I’m guessing the site was designed before responsiveness was a thing!), but I’m wondering if it would be possible to make a small change to make documentation pages usable on phones.
In particular, I see reasonable results when either setting max-width: 100vw on the <div class="fullwidth" id="page"> element or max-width: calc(100vw - 32px) on <div class="mw-parser-output">. Here’s what the latter approach (which avoids having the search box overlap the “Style / Recording” heading) looks like in devtools:
The layout is still far from ideal: the page is as wide as before (which is probably a requirement to avoid breaking the MusicBrainz header). However, the main wiki content is at least limited to the viewport width.
Would a change like this to the documentation pages be possible as a quick interim workaround until a responsive design is in place?
I see that a responsive redesign was discussed in 2016 at MusicBrainz website responsive theme for mobiles?, but the thread looks like it died out. This also came up early in the long redesign brainstorming thread at MusicBrainz Web Design Revamp?.