Thanks for the feedback.

After talking to @iamjessklein yesterday and in light of @Esanders' comments above, I've put something together along those lines:

With the narrower inputs, there's no wrapping on a 320px-wide screen, and 4-digit numbers fit comfortably.

While looking into this, I noticed the spacing between elements is affected by whether we have fieldset->widget or fieldset->field->widget. It's also affected by whether we use addItems() or append one element to the other. We should use these components properly to get a predictable appearance, and if there's a need to deviate, we should comment why.

Thinking more about point (4), that layout looks pretty crowded on a mobile screen:

Thanks for the feedback, it's really helpful to have this all written out. I'd been thinking a couple of these things too - especially (2) and (5).

A simple fix would be to make the sidebar narrower for smaller screen sizes.

Makes sense to me. As far as I can see, other than the media dialog, only the graph dialog uses the media size widget, and it configures it not to have the "full size" button.

Thanks! I've commented on the patch - I think the fieldsets work semantically (unless I've misunderstood something) - particularly on the advanced tab.

I agree that ve.ui.MWMediaDialog should use FieldLayouts to wrap and labels its widgets, rather than FieldsetLayouts.

@dchan and I have made a plot of the whole project* though it's too big to display here at any resolution where the class names are readable. Plotting inheritance sideways (parent -> child), it's very tall and narrow, but chopped into four columns, it looks like this:

Thanks for this - I've filed it as T204820

I think this looks fine with a few fixes, so I think it should be re-enabled.

Should I file a task for making the alignment responsive upstream?

It would be great to automate as much of this as possible, so it can be repeated in the future with minimal pain.

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

Appearance after that patch:

I think that works. Here it is in German:

Desktop	Mobile

In this case, I'd propose changing the booklet layout (menu at the side) to an index layout, like this (from the score inspector):

It seems the the widget gets 60% of the width (as opposed to the label) by default. Where there are only narrow widgets (e.g. toggle switches, as here), perhaps this should be overridden.

Thanks - I'll break those into subtasks.

I've had a look at the dialogs, including those that are used for editing parts of the document (e.g. table dialog, math dialog), and those that aren't (e.g. save, command help tips, etc).

Should this be moved to QA?

Here are some examples of mobile dialogs for @iamjessklein

Looks like the (empty) input flashes red when you close the link inspector again, though this was already happening.

This behaviour is caused by the CSS fix to T170114, which preserves whitespace in removed/inserted content, so we can see removed/inserted spaces properly. There's a slight inconsistency in this fix: whitespace is collapsed if content is unchanged, and preserved if content is changed.

I agree, that might be the thing to do here... We could even start by always having that message (and not calculating/showing any metadata diffs), while we figure out how best to display this kind of thing in the visual diff.

In T199298#4420683, @Esanders wrote:

so ideally we would just fix the placement of that comment node (which might be more in @dchan 's ball park)

It already is giving us a CommentMetaItem... Sounds like it's related to T189543

This looks the same as T187589 and is probably due to something in the diff-patch-match library which does the linear diffs.

The reason I put it here is because the work I'm doing on lists diffs happens to solve this too, but happy to move it if that makes more sense...