It should look like this ->

Change 295775 had a related patch set uploaded (by Bmansurov):
Un-break page actions on User pages

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

@bmansurov, @Jdlrobson: What's the status of 295775: Un-break page actions on User pages given 295973: Hygiene: Separate tagline from heading

@phuedx that patch shouldn't block fixing this, but I think it is a useful refactor.

This is proving more complicated than expected.
If we want a quick short term fix so it doesn't look hideous the following is the most easiest achieved:

That said, I feel we need a better long term solution. It is my feeling that it would be better to reorganise the HTML so that page actions appears after the user page actions and then try and achieve the floating using tablet specific styles. Relying on absolute positioning as we are currently doing seems problematic and I'm not convinced it will scale well across older devices.

I've +1'd @bmansurov's change and would be happy to merge it.

Despite @Jdlrobson's choice of language, he's correct in saying that the user action styles and DOM layout are complicated. Perhaps we might also take the time them, i.e. put the mobile/tablet/desktop designs, the expected DOM structure and associated styles, and the reasoning behind them all in one place, to alleviate some of this complexity – I take responsibility for this not having been done, by the way.

My reason for +1 (and +2, if necessary), is that, AFAICT, the change removes an obsolete style from the user page styles, which was overriding the more general user action styles.

Relying on absolute positioning as we are currently doing seems problematic and I'm not convinced it will scale well across older devices.

The position property was introduced in the CSS2 recommendation, which was published in 1998. Remember our Grade A, C, and X classifications, and weigh the cost of changing the user actions layout against the cost of supporting what are likely Grade X browsers in this context.

I wasn't quite sure what you meant by "scale" either. With @bmansurov's change checked out, I can arbitrarily add and remove elements from the container without it breaking the layout:

What have I misunderstood?

I think it's me that is misunderstanding.

I merged the patch on the basis that I've not been too involved with the new page actions html/css so I think I'm just confused. Given @phuedx is happy I'm more confident.

@phuedx I would definitely appreciate such a write-up or at least better documentation in code.
My concerns around the CSS are around the fact that I've seen position absolute work strangely in older browsers (but these browsers could now be defunct and not to be worried about) - issues I recall are typically when the parent element is not position relative and the absolute positioning attaches them to elsewhere and problems with the box model. I have no evidence this is a real problem though, but I certainly have run into such issues in the IE6 days (which I guess we don't care about now :))

Change 295775 merged by jenkins-bot:
Un-break page actions on User pages

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

^ 👍