Page MenuHomePhabricator

Grey background for temporary usernames overlaps the punctuation marks in RC and Watchlist with grouped mode
Open, HighPublicBUG REPORT

Assigned To
Authored By
Iniquity
Jul 27 2025, 6:20 PM
Referenced Files
F70855914: image.png
Thu, Dec 4, 3:35 PM
F70855900: image.png
Thu, Dec 4, 3:35 PM
F70813440: Talk page tempuserlink without outline.PNG
Tue, Dec 2, 5:43 AM
F70813407: Talk page tempuserlink with outline.PNG
Tue, Dec 2, 5:43 AM
F70773192: Capture (1).PNG
Sat, Nov 29, 5:15 PM
F70773140: Capture.PNG
Sat, Nov 29, 5:15 PM
F65680580: image.png
Jul 27 2025, 6:20 PM

Description

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

What happens?:
Symbols []; are overlaped.

image.png (395×1 px, 60 KB)

What should have happened instead?:
Symbols []; displayed as usuall.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
A_smart_kitten renamed this task from Grey background for temporary usernames overlaps the punctuation marks in RC and Whatchlist with grouped mode to Grey background for temporary usernames overlaps the punctuation marks in RC and Watchlist with grouped mode.Jul 27 2025, 8:20 PM

I see a couple of solutions:

  • Depending on how the [] are implemented, add some CSS padding or spaces either side of them
  • Add some CSS targeted to this list that adds horizontal padding to temporary usernames
  • Use transparent black instead of grey for the highlight (most universal fix, but would require testing e.g. in dark mode)
  • Depending on how the [] are implemented, add some CSS padding or spaces either side of them

If you choose this way, be sure to check how it will look together with CheckUser-UserInfoCard.

I see style

.mw-tempuserlink {
    background-color: var(--background-color-interactive,#eaecf0);
    outline: 2px solid var(--background-color-interactive,#eaecf0);
    border-radius: 2px;
    white-space: nowrap
}

There's a trick claim apply a margin equal to half the outline,
but playing with it in Chrome/ium (also with absurdly big outline) it worked for not half, but equal margin size; quite nicely when considering horizontal overlaps only.

Adding margin: 2px; seems to work.

Dragoniez raised the priority of this task from Low to High.Thu, Nov 27, 5:45 PM

Temp users' links are now decorated in edit summaries as well, so this task has become more important.

Adding margin: 2px; seems to work.

+1 to this. This issue is caused by the outline being set to 2px. Adding a bit of horizontal margin would resolve it quite elegantly.

.mw-tempuserlink {
    background-color: var(--background-color-interactive,#eaecf0);
    outline: 2px solid var(--background-color-interactive,#eaecf0);
    border-radius: 2px;
    white-space: nowrap;
    margin-left: 2px;
    margin-right: 2px;
}

...or, we might simply remove outline. To me the outline-less version still looks good. It's a bit tricky when the container is italicized, though. Perhaps removing the outline and adding horizontal margins would be the way to go.

Change #1213048 had a related patch set uploaded (by Dragoniez; author: Dragoniez):

[mediawiki/core@master] Fix tempuserlink background intrusion on adjacent text nodes

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

Here are some other examples of background intrusion in italicized contexts:

Capture.PNG (89×1 px, 47 KB)
Capture (1).PNG (98×1 px, 46 KB)

This issue is likely also important for T392775: Add link color for temporary usernames in content and discussion pages.

...or, we might simply remove outline. To me the outline-less version still looks good. It's a bit tricky when the container is italicized, though. Perhaps removing the outline and adding horizontal margins would be the way to go.

We want to use outline by default to avoid altering layouts: T398439. Where layouts do need to be altered, they should be fixed on a case-by-case basis.

We want to use outline by default to avoid altering layouts: T398439. Where layouts do need to be altered, they should be fixed on a case-by-case basis.

Sorry I wasn’t aware of that migration. However, I’m not sure if there’s any practical way to “fix this on a case-by-case basis” unless we move away from using outline.

Tempuser links are now highlighted on talk pages as well, and I don't think there's any reliable way to detect adjacent text nodes that get intruded on. Perhaps we can add horizontal margins, but that would also affect vertical alignment.

Talk page tempuserlink with outline

Talk page tempuserlink with outline.PNG (84×917 px, 17 KB)

Talk page tempuserlink without outline

Talk page tempuserlink without outline.PNG (92×922 px, 18 KB)

Given these constraints, wouldn’t it be necessary to reconsider the use of outline to ensure the styling remains compatible with the latest interface design? TBH the intrusion issue seems to me more important than the vertical alignment issue, which only appears under specific circumstances.

Change #1213048 abandoned by Dragoniez:

[mediawiki/core@master] Fix tempuserlink background intrusion on adjacent text nodes

Reason:

I'll leave this to those who are familiar with the context

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

The intrusion seems pretty minimal. We could either reduce the outline to 1px, or use semi-transparent black instead of grey for the colour.

From T398439:

... for example opening the link in VE causes the width to change and content to reflow ...

To elaborate, in VE we use padding and negative margins to highlight a focused link, so that code would need to be updated if the base class sometimes had padding on it.

Here's a summary of our options. I think the transparent background seems least bad, since we can fix all the instances of this bug without re-introducing T398439.

Use side margins

Pros:

  • Fixes this bug

Cons:

  • Causes too wide margins when other tools like UIC are enabled
  • Causes jumps when editing in VisualEditor, which adds its own margins when highlighting
  • Causes vertical misalignment, e.g. in tables

Use outline

Pros:

  • Avoids all the cons of margin

Cons:

Use transparent background

Pros:

  • Fixes this bug everywhere
  • Works well with other tools like UIC, vertical alignment, VisualEditor

Cons:

  • Needs re-calculating if background-color-interactive changes
  • Changes colour if the background is not white, e.g. doesn't work in dark mode

Not working in dark mode isn't really a problem, because the current highlighting doesn't do much in dark mode anyway:

Current: highlighting difficult to see, brackets in edit summary are covered
image.png (105×948 px, 49 KB)
Transparent: highlighting not visible, but brackets in edit summary are visible
image.png (105×948 px, 49 KB)

Change #1215200 had a related patch set uploaded (by Tchanders; author: Tchanders):

[mediawiki/core@master] Use transparent background for highlighting temporary user links

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

Not working in dark mode isn't really a problem, because the current highlighting doesn't do much in dark mode anyway

It might depend on a specific display one uses, but personally, I wouldn't say the highlight is difficult to see on my end. For sure it's less prominent than in light mode, but still, I do feel a difference between the old the proposed version. Therefore I'd suggest to keep the old color for the highlight in the dark mode, especially given that anything we're going to settle on here will probably remain unchanged until mid-January (which is quite a long time for anyone who could be annoyed by this change).