Restore hidden-review-comments-indicator

[chcamiloam]

• Part of hidden-review-comments-indicator is missing the indicator line #5897

Test URLs

https://github.com/refined-github/sandbox/pull/18/files

Screenshot

Description

Class .blob-num was overwriting plugin's css, added !important to fix the issue.
Counter was not working, it was using the wrong selector

[fregante]

Why? Does it work with double-digit comments?

[fregante]

Maybe it's ok

[chcamiloam]

The Comments icon too close to the screen border in 1800px with 100% imo, but let me change it :)

[fregante]

Is this selector doing anything? I don't see the line added by border-top in the your screenshot.

See:

[chcamiloam]

The class is working, but I'm not so sure about the selector, let me do some testing :)

[chcamiloam]

Removed the css, I took one by one the lines and it doesn't affect anything (the absolute is still the fix of the main issue).
I tried with right:100% and this is the result

I changed it to 95% this time, it should allow to not have issues with 2digits numbers

[fregante]

What I meant is that the line between 22 and 23 here is missing, you can see it in the gif I linked:

border-top is supposed to draw that line, but that part is broken. That's why "it's not affecting anything"

[chcamiloam]

Changed the structure to handle the icon with less css. Everything looks the same but the markup structure is different, add the line again.

[fregante]

This happens in split view:

[chcamiloam]

Added new selector to change markup in split-view, this may seem unnecessary but I really wanted the line in both number columns.
The space in the left is lower in split view, so it's not possible to have the number.

[fregante]

We try to keep the amount of code to a minimum. The previous "complex CSS" worked without changes to the DOM. I'd prefer to keep it that way

[chcamiloam]

I can't see how to draw the line in both number columns without changing the markup, can I get a hand here? this is how it looks right now.

[fregante]

This was the only fix required to make the button visible again.

The reason why the line isn't being shown is because GitHub now uses ::before to show the actual line, so our code fighting with GitHub’s own style.

An easier solution would be to either:

• only use ::after, which doesn't seem to be used by GitHub
• ensure that all the CSS actually applies OR figure out why it doesn't

I undid the previous changes because I don’t think they were going in the right direction for the most part. I'd be ok merging this as is for now and the line can be restored later.

Rather, this single line is good enough for now and if you can't fix the rest autonomously I'd have to fix it myself, which defeats the purpose of PRs

[fregante]

left: -40px only works for the specific icon size, font size and character count.
right: 100% is the correct alignment and it works with any amount of text in this button.

The only problem lies in the button’s content itself, which seems to have excessive padding (which exists to expand its clickable area, but it should be counteracted by negative margins)

Also there's an additional issue with the available space overall for this piece of UI. For example if there's the new file drawer open, perhaps we cannot show a comment count at all.