Page MenuHomePhabricator

"Show IP" button on Special:Contributions while using MinervaNeue skin needs styling fixes
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Dreamy_Jazz
Mar 2 2023, 2:06 AM
Referenced Files
F37030209: Screenshot 2023-05-23 at 11.42.44 AM.png
May 23 2023, 2:16 PM
F37030211: Screenshot 2023-05-23 at 11.42.20 AM.png
May 23 2023, 2:16 PM
F37030225: Screenshot 2023-05-23 at 11.45.17 AM.png
May 23 2023, 2:16 PM
F37030210: Screenshot 2023-05-23 at 11.41.42 AM.png
May 23 2023, 2:16 PM
F36974101: T330966_IPMasking_Minerva_Hover_SpecialContributions.png
May 3 2023, 7:32 PM
F36973951: T330966_IPMasking_Minerva_Watchlist_WrongSide.png
May 3 2023, 6:24 PM
F36973949: T330966_IPMasking_Minerva_RecentChanges_WrongSide.png
May 3 2023, 6:24 PM
F36973947: T330966_IPMasking_Minerva_Hover_S20Horizontal_WoRights.png
May 3 2023, 6:24 PM

Description

Steps to replicate the issue (include links if applicable):

  • Enable and use the MinervaNeue skin
  • Load Special:Contributions for a temporary account

What happens?:
Observe that the "Show IP" button is not centred vertically and when hovering over the button the edge of the button collides with the title of the page

What should have happened instead?:
Ideally the "Show IP" button should be centered vertically like is done for the title of the page just next to it and should give itself enough space.

Software version (skip for WMF-hosted wikis like Wikipedia):
Local testing wiki running latest code for CheckUser, core and MinervaNeue

Other information (browser name/version, screenshots, etc.):
Larger width of screen:

Default viewMouse hovered over button
image.png (1,406×392 px, 47 KB)
image.png (782×121 px, 17 KB)

Smaller width of screen (size set on Firefox to Samsung Galaxy S20+):

Default viewMouse hovered over button
image.png (651×466 px, 40 KB)
image.png (680×215 px, 22 KB)

Without rights to be able to see the "(change visibility)" link:

image.png (649×201 px, 17 KB)

Testing Notes:

  • Enable and use the MinervaNeue skin.
  • Load Special:Contributions for a temporary account.
  • Ensure the Show IP button is centred vertically and when hovering over the button the edge of the button does not collide with the title of the page.
  • Also counter-check that this patch doesn't affect other pages.

Event Timeline

Thanks for filing ALL of these tasks, @Dreamy_Jazz. I just realized you filed so many. Thank you. Stay awesome.

Change 911317 had a related patch set uploaded (by Cyndywikime; author: Cyndywikime):

[mediawiki/skins/MinervaNeue@master] Fix 'Show IP' button on Special:Contributions on MinervaNeue skin

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

Change 914257 had a related patch set uploaded (by Cyndywikime; author: Cyndywikime):

[mediawiki/extensions/CheckUser@master] Fix 'Show IP' button on Special:Contributions on MinervaNeue skin

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

Change 911317 abandoned by Cyndywikime:

[mediawiki/skins/MinervaNeue@master] Fix 'Show IP' button on Special:Contributions on MinervaNeue skin

Reason:

This patchset has been abandoned in favour of this one : https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CheckUser/+/914257

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

@Cyndymediawiksim As you see in the Rights row, I have the Show IP button when hovered, it's crossing over the title and the rollback.

I also checked other pages and came across that in Recent Changes and Watchlist, the Show IP button is on the left side beside the right side like the rest of the other pages.

Latest Versions:
Core: 1.41.0-alpha (11f06df)
Minerva: (8b6c31f)
CheckUser: 2.5 (78ef41f)

View**Chrome-Desktop (macOS 13.3)*Chrome- Galaxy S20:VerticalChrome- Galaxy S20:Vertical
with Rights
T330966_IPMasking_Minerva_Hover_Desktop.png (1,191×742 px, 105 KB)
T330966_IPMasking_Minerva_Hover_S20Vertical.png (945×741 px, 94 KB)
T330966_IPMasking_Minerva_Hover_S20Horizontal.png (943×571 px, 78 KB)
w/o Rights
T330966_IPMasking_Minerva_Hover_Desktop_WoRights.png (1,164×700 px, 77 KB)
T330966_IPMasking_Minerva_Hover_S20Vertical_WoRights.png (892×738 px, 76 KB)
T330966_IPMasking_Minerva_Hover_S20Horizontal_WoRights.png (1,027×598 px, 68 KB)

Recent changes: Show IP is on the other side

T330966_IPMasking_Minerva_RecentChanges_WrongSide.png (1,207×719 px, 91 KB)

Watchlist: Show IP is on the other side

T330966_IPMasking_Minerva_Watchlist_WrongSide.png (1,185×688 px, 96 KB)

@GMikesell-WMF, this patch depends on this one: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CheckUser/+/912901/2. And I think the latter fixes the Show IP is on the other side issue and has to be merged first.

Change 914257 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] Fix 'Show IP' button on Special:Contributions on MinervaNeue skin

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

@Cyndymediawiksim Patch has been merged which the Show IP button is now on the correct side but it's crossing over the rollback button when hovered as seen in https://phabricator.wikimedia.org/T331001#8824992 (Recent Changes & Watchlist)

Special:Contributions

T330966_IPMasking_Minerva_Hover_SpecialContributions.png (1,121×525 px, 76 KB)

@Cyndymediawiksim Patch has been merged which the Show IP button is now on the correct side but it's crossing over the rollback button when hovered as seen in https://phabricator.wikimedia.org/T331001#8824992 (Recent Changes & Watchlist)

Special:Contributions

T330966_IPMasking_Minerva_Hover_SpecialContributions.png (1,121×525 px, 76 KB)

@GMikesell-WMF , thanks! nice catch!Patch updated.

@Cyndymediawiksim Since the original patch was merged we'd need a new patch here.

@Cyndymediawiksim Since the original patch was merged we'd need a new patch here.

@Tchanders, New patch was created here: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CheckUser/+/916470. Thanks! :)

@Prtksxna @Niharika

@Dreamy_Jazz is reporting a design flaw on this patch:
"If the "rollback" or "thanks" buttons are not shown, this adds extra space between the two lines".

We would love to hear from you on this one.

Without Thanks + Rollback

Screenshot 2023-05-23 at 11.41.42 AM.png (1,034×334 px, 52 KB)

Screenshot 2023-05-23 at 11.45.17 AM.png (1,012×646 px, 113 KB)

With Thanks + Rollback

Screenshot 2023-05-23 at 11.42.20 AM.png (870×250 px, 42 KB)

Screenshot 2023-05-23 at 11.42.44 AM.png (944×332 px, 50 KB)

@Prtksxna @Niharika

@Dreamy_Jazz is reporting a design flaw on this patch:
"If the "rollback" or "thanks" buttons are not shown, this adds extra space between the two lines".

We would love to hear from you on this one.

Without Thanks + Rollback

Screenshot 2023-05-23 at 11.41.42 AM.png (1,034×334 px, 52 KB)

Screenshot 2023-05-23 at 11.45.17 AM.png (1,012×646 px, 113 KB)

With Thanks + Rollback

Screenshot 2023-05-23 at 11.42.20 AM.png (870×250 px, 42 KB)

Screenshot 2023-05-23 at 11.42.44 AM.png (944×332 px, 50 KB)

This has been discussed during a team meeting and we are deciding to move forward with the design flaw.