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)

In T400577#11078319, @Esanders wrote:

• 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.

...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:

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

In T400577#11413970, @Dragoniez wrote:

...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.

In T400577#11419029, @Esanders wrote:

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 without outline

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:

• Doesn't fix this bug, which also occurs in content areas (e.g. T400577#11417225 - thanks @Dragoniez)

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
Transparent: highlighting not visible, but brackets in edit summary are visible

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

In T400577#11433173, @Tchanders wrote:

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).