The namespaceselector is wrapped in a PaneLayout, which has a fixed width of 60em (in OOUI default 50em), and all elements in the namespace selector has display table-cell. The NamespaceInputWidget inherits an OOUI-widget where this is the default and expected, but that doesn't look very good here. @matmarex said yesterday[1] (iirc) that he want's to rewrite the NamespaceInputWidget anyway, because it doesn't support title and id and other attributes for each element in it out of the box. I don't know, how this will look like, but I think something like a horizontal Widget, where each element (including the label) is inline-aligned. I don't want to slide in MatmaRex's work, if he already is working on it?

[1] https://gerrit.wikimedia.org/r/#/c/227476/

My plan for NamespaceInputWidget is:

• Implement a FlowLayout in OOjs UI, that would arrange its contents in a single line (using display: inline-block for its items)
• Extend OOjs UI's PHP LabelWidget, so that passing a input config option will generate an actual <label for> pointing to the right widget, possibly generating the id attribute where necessary

Then:

• Refactor NamespaceInputWidget into two, NamespaceInputWidget + ComplexNamespaceInputWidget: the former would be only the dropdown (and inherit from DropdownInputWidget), the latter would be dropdown plus two checkboxes
• Use the new LabelWidgets for checkbox labels, to replace the FieldLayouts
• Use the new FlowLayout to wrap the dropdown and checkboxes, to replace custom CSS we have
• Refactor ComplexNamespaceInputWidget to take nested configuration options for invert, associated, and namespace, rather than require parameters like invertName and so on for every combination. We already have this on JS side in e.g. PopupButtonWidget to pass all the parameters for the PopupWidget inside using popup config option, or in DropdownWidget to pass parameters for the MenuSelectWidget inside using the menu config option.

(If anybody wants to work on it, or has better ideas, feel free to start. Otherwise I plan to do it tomorrow.)

In T99256#1492988, @Legoktm wrote:

In T99256#1492982, @GOIII wrote:

Any chance this can be further refined so that the Namespace: label appears all on the same "line" before the input selector as the rest of the options (see attached pic)?

Yes. That's T107311: OOUI-ified watchlist has odd spacing.

Ah thanks. Don't know how I missed it.

From a functional perspective: While I find this spacy style useful on mobile devices (big fingers ...), on desktop I have a very precise mouse and a good screen and good light conditions so there is no need for the space.
If a designer would contradict, then I'd ask the designer to present a concept for an overhaul of the entire watchlist, as design should not be only awesome to look at but also functional. As of now, the watchlist is not really nice to look at - in particular the entries are squashed together while the form controls are spacy - and part of their functionality was lost by wasting >100px.

Hmm, I didn't realize that there's no line-wrapping on the namespace selection form now, that is definitely problematic and probably should be fixed now rather than soon.

From T107414:

(I can't do it now, but I'll investigate this in a few hours and submit a simple fix, or a revert until we solve the problem.)

The whitespace is indeed too much and the difference in button size is huge. Also, because this was not communicated to the local communities, this is even a much bigger change because it's suddenly there. It's just a few minutes live and people already start complaining at my homewiki (nlwiki).

Some screenshots from posterity (from pl.wp):

Current state
The reverted change

In T107311#1494593, @matmarex wrote:

Hmm, I didn't realize that there's no line-wrapping on the namespace selection form now, that is definitely problematic and probably should be fixed now rather than soon.

That probably a side-effect of using display:table-cell without any parent element having any display:table dealing with auto margins, width etc. You're better off like you said earlier going with display:inline-block to keep everything in a single "row".