Highlighted notes look bad

https://gitlab.com/gitlab-org/gitlab-ce/issues/11867#note_3304630

The top note was the anchor (i.e., #note_3304630) so it gets a "highlighted" background. When that happens, there's not enough padding for the avatar icon and the Delete icon, and it looks weird that there's a white gap to the right of it.

@creamzy @skyruler How would you like this solved?

@jschatz1 hey! we need to add padding for regular and hover state, 10px should be enough cc @creamzy @dzaporozhets

@jschatz1 @skyruler I dont agree adding padding on sides for active/hover state. It will "jump" all content wide/narrow which is awful.

And I think fixing it right now makes no sense unless we implement new sidebar (#3981 (closed)). At that time we can implement side padding in comments for all states.

@dzaporozhets I will wait then. Good idea.

@dzaporozhets I'm not proposing do it on hover, we need to discuss the best solution for this and do fast mockup

To be clear this isn't about a :hover state. It's about :target.

TODO:

• redesign for issue sidebar first
• come back to this issue after by adding side paddings

Milestone changed to 8.5

Added ~19492 label

Removed frontend label

@jschatz1 for inputs and buttons right/left padding is 10pt, excluding the border. Am I correct?

Added frontend label

Removed ~19492 label

@creamzy For buttons you have 10px in Antetype. Which is also what I used in the new sidebar.

padding: 0 10px 0 10px;

@jschatz1 yeah nice stuff, but if we will do list element like above we will not have a problems with ugly hovers

@skyruler Agreed. Great!

mentioned in issue #8693 (closed)

mentioned in commit 9fd220b3

mentioned in merge request !2937 (merged)

Reassigned to @iamphill

Status changed to closed by merge request !2937 (merged)

mentioned in commit fa82f67f

mentioned in commit d22ebcf0