sindresorhus/refined-github

New github reaction style makes `reactions-avatars` look weird #4674

ShadowJonathan posted onGitHub

πŸ‘‰ πŸ‘‰ It's been fixed in v21.8.22, please update! πŸ‘ˆ πŸ‘ˆ

https://github.com/sindresorhus/refined-github/releases/tag/21.8.22


Description

Github is (presumably) doing an A/B Reaction style test right now, I got in, and refined-github is messing with the reaction style.

Screenshot

image (with refined-github)

image (without)

Example URL

https://github.com/vector-im/element-web/issues/18248

Browser(s) used

Microsoft Edge (chromium) 92.0.902.73


@refinedgithubbers Should we disable this feature via hotfix for now?

posted by fregante over 3 years ago

I don't see anything wrong (yet)

posted by yakov116 over 3 years ago

This can be partially fixed by adding this to the custom CSS field:

/* https://github.com/sindresorhus/refined-github/issues/4674 */
:root .reaction-summary-item:not(.js-reaction-group-button) span:first-of-type {
    all: unset;
    margin: 0 1.2em 0 0.5em;
}

From

<img width="282" alt="Screen Shot 3" src="https://user-images.githubusercontent.com/1402241/129768662-bcb87261-46ee-46f1-bc62-2f1a67b70f56.png">

To

<img width="303" alt="Screen Shot 2" src="https://user-images.githubusercontent.com/1402241/129768673-c182c964-b07c-4491-868e-51562439427c.png">

posted by fregante over 3 years ago

FWIW this A/B test does not occur when you're not logged in.

posted by ShadowJonathan over 3 years ago

Now I do, do a hotfix (Since now its broken for me and I am selfish) πŸ˜›.

This will require some careful thinking for GHE

posted by yakov116 over 3 years ago

Some style is still leaking since it's not bound to any rgh- classes. Any fix should probably just add a rgh-reactions-avatar class to each button and target that in every selector.

Also discussed in https://github.com/sindresorhus/refined-github/pull/4635#issuecomment-891278999

posted by fregante over 3 years ago

Mea culpa, I could have submitted a better fix in #4635 to prevent this.

Meanwhile leaked styles can be temporarily (partially) fixed with:

.reaction-summary-item:not(.js-reaction-group-button) span:first-of-type {
    all: unset;
    /* From GitHub */
    margin-left: 2px;
    padding: 0 4px;
}
posted by kidonng over 3 years ago

The same thing happens even if reactions-avatars is disabled

posted by unbeatable-101 over 3 years ago

There's a PR for this now.

@refinedgithubbers I'll release a new version in 15 hours, let's review/testany PRs that is finished so I'll include them in the release.

posted by fregante over 3 years ago

@fregante did you forget to close the issue? Or are waiting for the release?

posted by yakov116 over 3 years ago

v21.8.22 is in the stores with a fix 🎊

Except for Safari users… maybe next month? πŸ˜ƒ

https://github.com/sindresorhus/refined-github/releases/tag/21.8.22

posted by fregante over 3 years ago

Much better! Thank you!

posted by jhpratt over 3 years ago

Fund this Issue

$0.00
Funded

Pull requests