In T357352#11234670, @jsn.sherman wrote:

We noticed this on an iPhone SE 2020

, but haven't been able to reproduce elsewhere; looking into it

Where was this happening, test.wiki, or in a patch demo?

Can't reproduce on an iPhone 11 in Safari, for users with short or long usernames, in Visual or Wikitext diffs, on test.wikipedia.org.

In T357352#11240415, @Samwalton9-WMF wrote:

In T357352#11234670, @jsn.sherman wrote:

We noticed this on an iPhone SE 2020

, but haven't been able to reproduce elsewhere; looking into it

Where was this happening, test.wiki, or in a patch demo?

Can't reproduce on an iPhone 11 in Safari, for users with short or long usernames, in Visual or Wikitext diffs, on test.wikipedia.org.

Yes, test Wiki on Safari and Firefox mobile, although we can now test on other wikis now that the train has rolled out

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://4659f97b59.catalyst.wmcloud.org/w/

I checked on enwiki in Firefox Desktop, and the thanks button is showing up, but it's not showing up in Safari.

Patch Demo of Minerva CSS patch in Safari Desktop (not merged to production):

enwiki (with VE patch already rolled out):

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://5a7f313575.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://beec378768.catalyst.wmcloud.org/w/

Change #1191558 abandoned by Scardenasmolinar:

[mediawiki/skins/MinervaNeue@master] Minerva VE Diff: Add z-index to mw-diff-ntitle1

Reason:

Abandoning again in favor of I6524a939a2052f3665b26170ea04dfc1c8a5b8fe

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

Change #1190740 restored by Scardenasmolinar:

[mediawiki/extensions/VisualEditor@master] Change thank and undo button's containers depending on Diff type

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

In T357352#9538818, @Jdlrobson wrote:

@Esanders the HTML element #mw-diff-ntitle2 becomes a fixed element at lower resolutions so the HTML element. The tools are in #mw-diff-ntitle1.

We should explore moving the tools into #mw-diff-ntitle2 or at least giving them a common parent.

Another option worth considering, is creating a dedicated container at the bottom of the page that's displayed only on mobile devices. I assume we'll have less problems if that was the case, however it would mean creating two thanks links/undo elements (and the element ID changes that come with it)

We explored using CSS to try to fake this (brittle) and using JS to conditionally move the elements to new parents (begging for regressions), and think that duplicating the elements is the most pragmatic solution for now.

Change #1190740 abandoned by Scardenasmolinar:

[mediawiki/extensions/VisualEditor@master] Change thank and undo button's containers depending on Diff type

Reason:

Going in a different direction.

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

Change #1194796 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/skins/MinervaNeue@master] Diff: Change styles for new mobile footer

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

Change #1194797 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/core@master] Diff: Add new mobile footer container

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

I took the liberty of moving the Thank button a little bit because of a comment made in another Phab task (https://phabricator.wikimedia.org/T402297#11247391). Note that the thank button's style is changed because I had https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Thanks/+/1192650 checked out when I made the screenshots. These patches do not deal with changing the Thankbutton's styling

It now looks like this:

This is ready for engineer + design review!

I am seeing some overlap between username and groups when the user has considerable amount of rights:

I've pushed some changes that remove the overlap between user groups and the user link. However, there is a significant gap when a user has only a few user groups. Based on the new designs of the footer, it appears that we will not be including the user groups. Can you confirm, @OTichonova? @Jdlrobson-WMF, how important are the user groups information-wise? Do you think it is critical to include all user groups, or can we hide some of them when they are numerous?

Hi @Scardenasmolinar. Are the user groups a vital part of the card? If not, I wouldn't keep them, as the elements in the card are taking up a lot of the screen.

cc @Samwalton9-WMF

In T357352#11265385, @OTichonova wrote:

Hi @Scardenasmolinar. Are the user groups a vital part of the card? If not, I wouldn't keep them, as the elements in the card are taking up a lot of the screen.

cc @Samwalton9-WMF

As a volunteer I can say I personally find them useful indicators about the experience of the editor. This is particularly useful in talk page conversations (it's good to know if I am talking to a newbie vs an admin).

I suspect you might see some backlash from mobile editors if you were to removal them altogether but it is hard to know how strong :)

If you wanted to be more conservative perhaps you could put them behind an overlay or use an ellipsis/horizontal scrollbar to cut them off?

In T357352#11265589, @Jdlrobson wrote:

In T357352#11265385, @OTichonova wrote:

Hi @Scardenasmolinar. Are the user groups a vital part of the card? If not, I wouldn't keep them, as the elements in the card are taking up a lot of the screen.

cc @Samwalton9-WMF

As a volunteer I can say I personally find them useful indicators about the experience of the editor. This is particularly useful in talk page conversations (it's good to know if I am talking to a newbie vs an admin).

I suspect you might see some backlash from mobile editors if you were to removal them altogether but it is hard to know how strong :)

If you wanted to be more conservative perhaps you could put them behind an overlay or use an ellipsis/horizontal scrollbar to cut them off?

I was going to suggest an overlay. Maybe place an information icon next to the user name that, when tapped, displays a pop-up with all the user's groups?

Can the user groups remain as-is, since changing them is outside the scope of this ticket? We can discuss this further on T402297: It should be possible to undo edits on mobile, where a redesign is planned, and the user groups may occupy a significant portion of the mobile footer. This ticket wants to keep as close to the current design as possible.

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://69d54fb33f.catalyst.wmcloud.org/w/

Change #1194797 merged by jenkins-bot:

[mediawiki/core@master] Diff: Add new mobile footer container

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

In T357352#11266005, @Scardenasmolinar wrote:

Can the user groups remain as-is, since changing them is outside the scope of this ticket? We can discuss this further on T402297: It should be possible to undo edits on mobile, where a redesign is planned, and the user groups may occupy a significant portion of the mobile footer. This ticket wants to keep as close to the current design as possible.

I'm sorry to say that I agree with Jon on this one; the design is a problem if it requires removing this info to fix the display bug. I think we should be sticking as close to the in-production design as possible while fixing the bug. Larger layout changes should probably go with T402297.

If that's not feasible; then I suggest we stall this task on the other one (or make it a child task) and fix both in one go in that task.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://4659f97b59.catalyst.wmcloud.org/w/

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://beec378768.catalyst.wmcloud.org/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://a43b8087a9.catalyst.wmcloud.org/w/

In T357352#11281660, @jsn.sherman wrote:

In T357352#11266005, @Scardenasmolinar wrote:

Can the user groups remain as-is, since changing them is outside the scope of this ticket? We can discuss this further on T402297: It should be possible to undo edits on mobile, where a redesign is planned, and the user groups may occupy a significant portion of the mobile footer. This ticket wants to keep as close to the current design as possible.

I'm sorry to say that I agree with Jon on this one; the design is a problem if it requires removing this info to fix the display bug. I think we should be sticking as close to the in-production design as possible while fixing the bug. Larger layout changes should probably go with T402297.

If that's not feasible; then I suggest we stall this task on the other one (or make it a child task) and fix both in one go in that task.

I think those issues have been fixed in the latest patchset. I have verified in my mobile device from Patch Demo. This is ready for another review!

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://4659f97b59.catalyst.wmcloud.org/w/

Logging some notes from playing with the patchdemo:
Note the thanks text color on wider minerva layout for visual diff

groups in the panel are looking good on the real devices I have on hand as well as narrow devices I could think to emulate

here's a link to a "Many group" diff that I created for testing:
https://a43b8087a9.catalyst.wmcloud.org/w/index.php?title=C091206c06f670444fe&diff=prev&oldid=457

I verified that the thank text color on wider minerva is already present in prod:

While there is a little bit of clipping on the bottom line of visible groups, I think this could fade to the bg color towards the bottom or use an ellipsis.

I have made some changes and went for an ellipsis. I think the real estate user rights occupy now decrease and look better, even though some information is now obscured. Let me know what you think! I will push these changes and update the patch demo.

I think that looks much better! I think Jon mentioned this earlier, but now that I see this, I would expect tapping the list to show the entire contents. Or providing some other method of seeing them all. Not sure how achievable that is?

Maybe we can use a codex popover that says See user rights and display them there?

In T357352#11291271, @jsn.sherman wrote:

I think that looks much better! I think Jon mentioned this earlier, but now that I see this, I would expect tapping the list to show the entire contents. Or providing some other method of seeing them all. Not sure how achievable that is?

I think it would be okay to scope this to a follow up task.

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://3ac6d61201.catalyst.wmcloud.org/w/

Change #1194796 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Diff: Change styles for new mobile footer

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

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://69d54fb33f.catalyst.wmcloud.org/w/

Just noting that the latest revision teal section is stacking like so:

this will also need to be fixed.

In T357352#11304015, @jsn.sherman wrote:

Noting that we found a checkuser bug in the mobile view, .ext-checkuser-userinfocard-button cdx-button cdx-button--action-default cdx-button--weight-quiet cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only is overlapping the edit count. Should be relatively low impact since this will only impact mobile checkuser users, but we should resolve this.

That's CheckUser-UserInfoCard (https://www.mediawiki.org/wiki/Product_Safety_and_Integrity/Anti-abuse_signals/User_Info) which is part of the CU extension (https://www.mediawiki.org/wiki/Help:Extension:CheckUser#UserInfoCard). But the issue doesn't just affect Checkusers on mobile devices. The UserInfoCard is available to all logged-in users as an opt-in feature T386439 and it's even deployed per default on ~10 medium / large wikis per T405342, so the issue will affect a lot of mobile users.

@OTichonova

Hi, I have a design question for you on this ticket.

We found a bug where when the CheckUser-UserInfoCard is appending an icon that is already being appended in minerva.
For example, here's what it looks like without the check user info card:

And here is when we have the CheckUser-UserInfoCard enabled $wgDefaultUserOptions['checkuser-userinfocard-enable'] = 1;:

What I can do is move the CheckUser-UserInfoCard to the side like so, but this doesn't fix the fact we now have two user avatar icons:

or

We can simply just hide the CheckUser-UserInfoCard when we're on minerva.

Hi @Kgraessle!
In the new iteration T402297#11306961, I actually don't have the person icon. Would it be possible to show the the icon next to the username when checkuser is turned on and none, when it is turned off?

Figma

Design	Design with visible user groups	Check user

Change #1198581 had a related patch set uploaded (by Kgraessle; author: Kgraessle):

[mediawiki/skins/MinervaNeue@master] Thanks button is obscured on mobile diffs in visual diff mode

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

Thanks for taking over this patch! I just have one small nit:

The user icon is not properly aligned with the username

We can either move the icon down a bit or move the username up.

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://3ac6d61201.catalyst.wmcloud.org/w/

This change seems to have broken the layout for the CheckUser-UserInfoCard

Before, it looked like this:

After, it looks like this:

Would it be possible to fix this as part of this task?

(To enable the feature, go to Special:Preferences#mw-prefsection-rendering and check "Enable the user info card")

Test wiki created on Patch demo by KGraessle-WMF using patch(es) linked to this task:
https://1132d790b1.catalyst.wmcloud.org/w/

Change #1198581 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Thanks button is obscured on mobile diffs in visual diff mode

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

Test wiki on Patch demo by KGraessle-WMF using patch(es) linked to this task was deleted:

https://1132d790b1.catalyst.wmcloud.org/w/

Great work y'all! This looks great! I love the solution you landed on and how it provides the foundations for allowing us to expand access to editor features on mobile.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://a43b8087a9.catalyst.wmcloud.org/w/