We need to add a margin-bottom rule for widgets that are part of OOUI HorizontalLayout in forms, because it looks strange on a small screen.
| Before | After |
 |  |
 |  |
This is best handled in OOUI themes, the specific file for WikimediaUI theme is for example /src/themes/wikimediaui/layouts.less
A solution should be added to both, WikimediaUI and Apex theme.
@Iniquity: Is this about the buttons only? Or something else?
If someone provides a hint about the place(s) in the code, could this become an good first task task or a Google-Code-in-2017 task if someone offered to mentor?
Good catch, @Iniquity – although having this on my list for a bit, I've never filed a task about it. The better you've started it here. :)
Well, I checked source code for EditPage and I noticed that those buttons are not part of HorizontalLayout. This forced me to look for alternative solutions. I decided that it would be better just to add a css rule for .editButtons in MediaWiki Core. I will upload a patch soon. @Volker_E, if I am wrong with this - please tell and I will fix this other way.
Change 399416 had a related patch set uploaded (by Phantom42; owner: Phantom42):
[mediawiki/core@master] Add margin-bottom for editButtons (EditPage)
Change 399423 had a related patch set uploaded (by Phantom42; owner: Phantom42):
[oojs/ui@master] Add margin-bottom for widgets which are part of OOUI HorizontalLayout
@Phantom42 You're right with this approach of splitting into two patch sets. :)
One problem that we currently have though, is that the “non-buttonized” links are set to display: inline leading to such situations with your patch in core:
@matmarex @Ladsgroup A longer-term solution would be to put those buttons into a HorizontalLayout then. Any foreseeable objections? (@Phantom42 that might be out of reach for the GCI task scope)
that might be out of reach for the GCI task scope
Well, I checked that yesterday. Placing edit buttons into HorizontalLayout shouldn't be difficult. So if @matmarex @Ladsgroup approve this solution, I may do it.
Having .cancelLink and editHelp not set to display: inline-block is actually an open issue as well.
They all carry inline-block child elements already, so it would just simplify the layout.
Also margin-bottom won't be the promised way out due to the historically grown, overly complex DOM construct here.
You might also look into adding vertical-align to workaround the different element's responses to adding margin.
And a last annoyance is the “ |” DOM text node addition. In the best of all possible worlds, we would add that via CSS generated content. Again, don't see this as your topic, @Phantom42 – let's keep it simpler for your task to be successfully accomplishable.
We can care about this in a follow-up patch.
Change 399423 merged by jenkins-bot:
[oojs/ui@master] Add margin-bottom for widgets which are part of OOUI HorizontalLayout
Change 399416 merged by jenkins-bot:
[mediawiki/core@master] Add margin-bottom for editButtons (EditPage)
@Volker_E hello :) can you check it please?
