#firstHeading has position:relative set in Common.css,

@Tacsipacsi: I don't see any firstHeading string in https://hu.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=22198345 ?

Wondering if this would be solved by T248761: [modern Vector only] Move indicators underneath firstHeading?

In T254666#6199789, @Aklapper wrote:

Wondering if this would be solved by T248761: [modern Vector only] Move indicators underneath firstHeading?

Possibly, depending on implementation. The implementation I've proposed in T248761#6041051 works, but flaggedrevs needs changes too.

Flaggedrevs and indicators are competing for screen space. Flaggedrevs has position:absolute, thus it's not too considerate towards indicators.
This concern should be taken into account in T248761 and flaggedrevs updated accordingly.
There aren't many wikis with flaggedrevs, so keeping this ticket in mind and testing on huwiki would be beneficial for that move.

In T254666#6199788, @Aklapper wrote:

#firstHeading has position:relative set in Common.css,

@Tacsipacsi: I don't see any firstHeading string in https://hu.wikipedia.org/w/index.php?title=MediaWiki:Common.css&oldid=22198345 ?

Sorry, it’s Vector.css. That has been changed recently, but not that part, so I don’t this on-wiki change causes the issue.

In T254666#6199826, @Demian wrote:

Flaggedrevs and indicators are competing for screen space.

But only on huwiki. The box is normally just below the first heading (see https://hu.wikipedia.org/wiki/Sablon:Userinfo?safemode=1), it’s moved upwards by on-wiki Vector.js. The biggest concern for which I haven’t changed this JavaScript to make use of the indicators was that when the page title is wrapped into several lines, the indicators are currently on the top, while this box needs to be at the bottom to look nice. So if the layout is as it was implemented (and rolled back), I can simply move the box next to the indicators and get rid of the absolute positioning. Your flexbox proposal, however, leaves the indicators at the top, so in that case it’s not a viable solution. (But the long-term solution should be T197912 with appropriate UI design, so much effort should be put in that, not in making this local hack work.)

@Tacsipacsi I've put together a demo, see how it works for you:
DEMO 1 (without huwiki repositioning, patch 605300)

@Tacsipacsi Out of curiousity: what was the reason to move up the revflagged dropdown?

In T254666#6220593, @Demian wrote:

@Tacsipacsi I've put together a demo, see how it works for you:

This report is about indicators conflicting with the FR box. I don’t see any indicators on the test page, so naturally there isn’t any conflict. But that’s not very interesting… (I tried to add some, but I don’t want to reveal my IP, and I couldn’t manage to actually log in. Same complaints in the login form about potential session hijacking as on production wikis yesterday.)

In T254666#6220797, @Demian wrote:

@Tacsipacsi Out of curiousity: what was the reason to move up the revflagged dropdown?

It happened in the first version of Vector.js, which was about three years before my registration. Therefore I don’t know, but I think I heard something about the FR box conflicting with coordinates like the ones in https://hu.wikipedia.org/wiki/Budapest. I also think it’s more aesthetic, but that’s my personal opinion.

In T254666#6220812, @Tacsipacsi wrote:

I don’t see any indicators on the test page

Yes, I've added that in DevTools... ;-) If you know how to add them, please tell.

I couldn’t manage to actually log in.

Use name IndicatorTest, pass IndicatorTest1

In T254666#6220820, @Demian wrote:

In T254666#6220812, @Tacsipacsi wrote:

I don’t see any indicators on the test page

Yes, I've added that in DevTools... ;-) If you know how to add them, please tell.

Probably that’s not the way indicators added most of the time. ;) I added it the traditional way, by editing the page. It looks great on medium screen where the article title is broken into two lines, but otherwise there’s plenty of place. On wide screen where everything fits in one line, it’s a little bit ugly that the indicator is somewhat above the FR box. Where things can get quite bad is (unsurprisingly) narrow screen. The FR box is not worse than the current production version (i.e. the production version is bad as well), but the indicator is worse: in the current production version, it’s a floating element, which means it occupies horizontal space only in the line it’s in, leaving subsequent lines of the title full-width (they are not full-width on huwiki because of the FR styling, but they are on all other wikis), and if there’s really little place, the indicators can become full-width as well, pushing the article title in the next line; in extreme case (when the indicators alone don’t fit in one line), they can even wrap. I’m not sure if that much flexibility can be reproduced with flexbox.

Thanks for the feedback! I've made some adjustments to better address these cases: diff.
Result: DEMO 2.

The wide-screen scenario definitely improved, but the narrow-screen is not much better, simply because the inidicators and the article title are forced to be next to each other, even if there’s hardly any horizontal space. The other issue can be seen on https://patchdemo.wmflabs.org/wikis/a56e70b03f135c240403c3a1c1568766/w/index.php/Rinderkennzeichnungs-_und_Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz when zoomed in: the star is vertically in the middle, which looks quite strange for me.

In T254666#6221607, @Tacsipacsi wrote:

the narrow-screen is not much better, simply because the inidicators and the article title are forced to be next to each other, even if there’s hardly any horizontal space.

Yes, that was an intentional choice. With flex-wrap the indicators would wrap below the title, but then it's always on the left side. I've enable wrapping below 600px to address this use-case.

The other issue can be seen on https://patchdemo.wmflabs.org/wikis/ae53c6c3ee01d1c4b32b01482a887782/w/index.php/Rinderkennzeichnungs-_und_Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz when zoomed in: the star is vertically in the middle, which looks quite strange for me.

Thanks for making the example. That's unfortunately caused by the align-items: flex-end; rule necessary to line up the icon with the bottom-border when the title is one line only, which is the most common case. The vertical centering occurs with very-very long titles. CSS cannot check for that circumstance, so I've tried a rough approximation with max-width: 600px. Other than that I have no idea for that use-case and I think it's so rare it's not worth more effort. Do you have any other idea?

New DEMO (deleted)

I just pressed Random three times at huwiki, and all three titles (Szocshon kogurjói király, (18231) 3286 T-1, Noyant-et-Aconin) wrap on my ~650px half-screen, so the breakpoint should probably be at least 720px.

My idea is throwing away this flexbox solution and keeping the float-based one—that’s so much simpler and more adaptive than this one. By the way, all these tries are basically about T248761, not this regression; this one probably can be fixed by introducing a z-index at some place. (That won’t be perfect, but not worse than a few months ago. I believe that the perfect solution for huwiki’s local issue is T197912, not adapting MediaWiki’s infrastructure to the local hack.)

In T254666#6236464, @Tacsipacsi wrote:

the breakpoint should probably be at least 720px.

Ok, updated.

By the way, all these tries are basically about T248761, not this regression; this one probably can be fixed by introducing a z-index at some place. (That won’t be perfect, but not worse than a few months ago. I believe that the perfect solution for huwiki’s local issue is T197912, not adapting MediaWiki’s infrastructure to the local hack.)

Yes, I wanted to adapt the solution of T248761 to suit your purpose too.

My idea is throwing away this flexbox solution and keeping the float-based one—that’s so much simpler and more adaptive than this one.

I've uploaded a simpler solution for T248761. I'll be focusing on that task and leave this for you. Feel free to experiment with it and change the stylesheets, js in the new DEMO 2.

@Tacsipacsi new testbench up with float layout for the title and indicators: DEMO 3.
As usual feel free to experiment with flaggedrevs.

Related issue: T292617

Going to plain https://hu.wikipedia.org/wiki/Sablon:Userinfo in Firefox 93 while being logged in, felhasználó szerkesztéseinek száma is clickable and I end up on https://xtools.wmflabs.org/ec (though it still visually overlaps with FlaggedRev's Ellenőrzött lap item).

However, using "safemode", both https://hu.wikipedia.org/wiki/Sablon:Userinfo?safemode=1&useskin=vector&useskinversion=1 and https://hu.wikipedia.org/wiki/Sablon:Userinfo?safemode=1&useskin=vector&useskinversion=2 shows no overlap here:

Which makes me wonder if this problem still exists (maybe in another browser, maybe I'm doing something wrong, maybe something has changed in the meantime?), and if it still exists if custom CSS in https://hu.wikipedia.org/wiki/MediaWiki:Vector.css or https://hu.wikipedia.org/wiki/MediaWiki:Common.css might be the underlying problem here nowadays? Please help me understand. :)

With safemode, there isn’t and hasn’t been any issue—the FlaggedRevs box is moved up by Vector.js (until T197912 is fixed), so with site CSS/JS disabled, there’s nothing to overlap. Even without safemode, I can’t reproduce the unclickability anymore, either. As far as I remember, @Teemeah reported this issue on-wiki; is it fixed for you as well?

In T254666#7430321, @Tacsipacsi wrote:

With safemode, there isn’t and hasn’t been any issue—the FlaggedRevs box is moved up by Vector.js (until T197912 is fixed), so with site CSS/JS disabled, there’s nothing to overlap. Even without safemode, I can’t reproduce the unclickability anymore, either. As far as I remember, @Teemeah reported this issue on-wiki; is it fixed for you as well?

Seems to be working (though I don't remember reporting this issue).