Page MenuHomePhabricator

CheckUserHelper table overflows when the Vector 2022 tools menu is open
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Dreamy_Jazz
Feb 19 2023, 7:46 PM
Referenced Files
F36922721: image.png
Mar 22 2023, 1:05 PM
F36862646: image.png
Feb 20 2023, 3:06 PM
F36862464: image.png
Feb 20 2023, 2:56 PM
F36862459: image.png
Feb 20 2023, 2:56 PM
F36862456: image.png
Feb 20 2023, 2:56 PM
F36861583: image.png
Feb 19 2023, 8:10 PM
F36861580: image.png
Feb 19 2023, 8:10 PM

Description

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

  • Load Special:CheckUser
  • Make a check with an IPv6 address included in the check

What happens?:
The wikitable overflows the width of the parent container (even though width is set to 100% of the parent container). This causes the table to overlap the page tools on the right hand side of the screen.

What should have happened instead?:
The content should never exceed the size of the collapsible box.

Software version (skip for WMF-hosted wikis like Wikipedia):
English Wikipedia

Other information (browser name/version, screenshots, etc.):
Setting the following CSS rule to the table seems to fix the issue for me on latest Firefox.

word-wrap: anywhere;

Event Timeline

Dreamy_Jazz renamed this task from CheckUserHelper table overflows when the tools menu is open to CheckUserHelper table overflows when the Vector 2022 tools menu is open.Feb 19 2023, 7:47 PM
Dreamy_Jazz moved this task from General / Unsorted to CheckUser on the CheckUser board.

Change 890193 had a related patch set uploaded (by Dreamy Jazz; author: Dreamy Jazz):

[mediawiki/extensions/CheckUser@master] Specify word-wrap as anywhere to fix overflow into V22 page tools

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

Before this change

image.png (164×1 px, 23 KB)

After this change

image.png (159×1 px, 27 KB)

@Dreamy_Jazz It'd be helpful to also have a before after of an IPv6 address to see if the breaking is readable and clearly understandable.

Sure. I won't be able to publish the actual instance I saw this on enwiki (as it's private data) but let me see if I can get some test data on a local testing wiki simulate what I saw.

This comment was removed by Dreamy_Jazz.

Before associated change (on a testing instance)

image.png (1×1 px, 179 KB)

After associated change (on a testing instance)

image.png (1×2 px, 314 KB)

Notes
I replaced the value for "User" with the IP. This only presents a problem if the user and IP are an IPv6 address. The IPv6 address used is the loopback address in the full form.

One thing I did note is that when this change is applied and the user / IP column does not have an IPv6 address, the user agent takes up too much space (as shown below). I've been trying to work out a fix, but min-width doesn't work on table elements....

image.png (909×1 px, 217 KB)

Modified the solution slightly. Setting word-wrap: everywhere on just the IPs list fixes the problem without the unintended side effects of making some columns too small:

image.png (1×1 px, 263 KB)

For reference on the associated change (as to whether T327334 solves the issue). Added the mw-parser-output class manually and the word-wrap definition from the Vector skin did not fix the issue:

image.png (728×2 px, 184 KB)

Change 890193 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] Fix summary table overflow over the page tools on Vector 2022

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

Dreamy_Jazz claimed this task.

The patch that has been merged should address this issue. Closing this.