Most of the problems are easy, but the map itself needs more thought. Unfortunately the current interface design forces the size of the map to be the same in the dialog as it will be in the real article:

As a result, it doesn't fit inside the dialog on mobile and it's tiny on desktop.

We can't smoothly scale it down, because Leaflet only supports discrete zoom levels, and using transform: scale(…) in CSS breaks the Leaflet editor (mouse clicks register in wrong places). We could at best make it 2x/4x/8x smaller. And we can't expand the boundaries on larger screens, because then the user can't tell if they're drawing features outsize of the visible area.

I think it's also poor that moving around the preview automatically saves the same position for the "real" map. It's probably very easy to fat-finger it on mobile, and I accidentally zoomed it in or out several times on desktop when trying to scroll the dialog with mouse wheel. It's not obvious that this will save the position (on mobile, you might not even see the "Reset map position" button on your screen, and anyway this button doesn't appear when inserting a new map, only when editing).

I would like to make the dimensions/location/zoom of the "preview" map inside the dialog independent of the real map, and then make the preview map fullscreen, with the area outside of the "visible" rectangle grayed out. (Or almost fullscreen, with buttons above/below to edit the options and to display the GeoJSON editor.) I think that would work better than the current one both on mobile and desktop.

Then we'd need another way to define the dimensions/location/zoom of the real map. I think that could be in a separate tab, as a world map with a rectangle drawn on it. The user would be able to move and resize the rectangle to define the location, and pick from a dropdown to choose the zoom level (and thus also dimensions). Dimensions would alternatively still be editable as text (like now).

(And if we have two tabs, we can also move the other options, like "Alignment", to a third tab.)

I'd like to hear an opinion on whether this is a good idea before I start working on it.

Change 459584 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/Kartographer@master] Improve layout of VE maps dialog on mobile

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

The patch fixes many minor issues, but it doesn't fix the most important one – the map doesn't fit. For now, I just slapped some gross huge scrollbars on it, which should be also shown on mobile.

The "Alignment" buttons might still be too wide, depending on the language and the screen width. If they're still a problem, we'll need to change them to a dropdown or work on T112982 (which @Esanders kind-of rejected a couple years ago).

Before:

Desktop
Mobile

After:

Desktop
Mobile

The left alignment looks a bit strange in wider mobile devices:

I like your suggestions for improving the map placement! At the very least (in a first iteration?) I agree with your suggestion to move the options to a different tab, to separate the map placement from the other tasks. The map could be centred over the GeoJSON input, which would look almost the same on your mobile/desktop views and neater on the wider mobile view.

Maybe we should always use dropdowns instead of alignment buttons groups when there are 3+ with labels, until the vertical/grid question is resolved?

Personally I find the language input a bit confusing when it's top aligned and there's no code input, since the language looks like another label, but that might just be me...

I agree, this is too much of a regression on desktop, and mostly so that we can fit the alignment widget in on mobile, but even then it barely fits in English.

pl	be

but hey, who uses Polish anway?

I think we might have to fix T112982...

In T203473#4577348, @Esanders wrote:

I think we might have to fix T112982...

+1 the core issue here seems to be the overflow bug.

I've redone the patch (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Kartographer/+/459584), based on my idea in T203473#4571634 and feedback on this task.

New "after" screenshots, for discussion:

Desktop
Mobile

The user can drag and resize a highlighted rectangle shown on the large map on the first screen to define the map area. On the second screen, the map controls can be used to add drawings/features to the map, while freely navigating around the map without permanently changing the map area.

The two widgets in the "Options" tab are pretty bad, but since we've now hidden them away ;), I think that we can work on these issues later. They also only are problematic on the narrowest screens (this is emulated iPhone 5 screen, at 320px horizontal).

The map is currently set to 70% height of the dialog. There might be a smarter way to split the available space, but I'm currently all out of ideas.

One tricky thing about this design is that switching the tabs affects the controls shown on the map. I'm not sure if this is intuitive.

We could shorten the tab labels in English to just Area/Contents/Options, but that's probably insufficient for Polish or German. :-(

“Bereich”/“Inhalte”/“Optionen” definitely doesn't save us to find an good overflow solution for tabs n the long run – T203859: Evaluate IndexLayout (TabLayout) appearance on mobile

Change 459584 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Redesign VE maps dialog with a bigger, flexible map

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

Checked the new changes, on desktop VE, on mobile site with desktop browser and on iPhone5s.
Everything looks good, the touch precision to move and resize a map even on a tiny device as iPhone5s is perfect!

Just a small side issue reported here: T210675.