Request:Option to prioritise usernames over display names in the UI

[montoyaleman]

While i am aware that this is a very minuscule issue in the grand scheme of things, i do remember BetterTweetDeck having a similar feature available in the settings where the username would take priority over the display name, either by showing the username first and then the display name, or not showing the display name whatsoever.

If possible, i would like the username to be displayed instead of the display name when someone retweets/likes something. Example: "@JimmyJohn55 retweeted" instead of "Jimmy Johnathan retweeted"

[Tomalak]

Seconded. The visual emphasis of vanity name over username is one of the most annoying, user-unfriendly Twitter features. It's causing me to constantly struggle remembering how people really are called, e.g. when trying to @-mention someone, and they add a lot of clutter in the form of Emoji and clever Unicode glyphs. Personally I don't care about the vanity names at all, I'd really prefer to not see them altogether.

[insin]

I do like the way it looks if you get rid of the vanity name and make the username bold instead, here's some CSS which does it for timeline tweets (the name in QTs looks like it's going to be a mess to handle in comparison, especially if there's a checkmark)

/* Swap position of names */
[data-testid="User-Names"] {
  flex-direction: row-reverse;
}
/* Hide vanity username */
[data-testid="User-Names"] > div:first-child a:not([tabindex]) > div > div:first-child {
  display: none;
}
/* Make username bold */
[data-testid="User-Names"] > div:nth-child(2) > div > div:first-child span {
  font-weight: bold;
}
/* Flip spacing due to the swap */
[data-testid="User-Names"] > div:first-child {
  margin-left: 2px;
}
[data-testid="User-Names"] > div:nth-child(2) {
  margin-left: 0;
}

Check and non-check example users:

[insin]

This is easier now, as checks and similar widgets have been made part of the display name, we just need to adjust the colour based on the theme:

[data-testid="User-Name"] > :nth-child(1) {
  display: none;
}
[data-testid="User-Name"] > :nth-child(2) {
  margin-left: 0;
}
[data-testid="User-Name"] span {
  font-weight: bold;
  color: rgb(15, 20, 25);
}