sindresorhus/refined-github

`conflict-marker` icon is different from the screenshot. #4117

EaseTheWorld posted onGitHub

conflict-marker is the motivation I installed refined-github. Thank you. But the '!' icon is different from what I expected.(it looks the fill is inverted) <img width="30" alt="스크린샷 2021-03-17 오후 12 02 34" src="https://user-images.githubusercontent.com/1066923/111419047-170d7200-872c-11eb-974d-944050f1576b.png"> I don't know it is bug or my browser.(I don't apply any other setting or ui plugin)

MacOS 10.15.7, Chrome 88


GitHub updated their icons last year, we just use those:

https://octicons-primer.vercel.app/octicons/alert-16

posted by fregante about 4 years ago

ok, the svg is from github. I'm still wondering the left margin is missing. <img width="75" alt="스크린샷 2021-03-17 오후 3 36 22" src="https://user-images.githubusercontent.com/1066923/111429455-5c39a000-873c-11eb-818d-d3867e71a2cb.png">

If this helps, X and V icon is inside <span class="d-inline-block mr-1" <div class="commit-build-statuses"> <a> <svg> but ! doesn't have span&div parent.

posted by EaseTheWorld about 4 years ago

The spacing seems correct to me: https://github.com/eslint/eslint/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc+comments+ (👈 don't forget to always include a URL when you open issues, like the issue template requests.)

<img width="694" alt="Screen Shot 4" src="https://user-images.githubusercontent.com/1402241/111529070-5ab1ad00-8727-11eb-8dbb-aa9e551455dc.png">

posted by fregante about 4 years ago

I think align-issue-labels is related. When I uncheck it,(this is my preference to save vertical space) the margin is missing. <img width="1063" alt="스크린샷 2021-03-18 오전 9 34 11" src="https://user-images.githubusercontent.com/1066923/111556118-2690c780-87cd-11eb-8fea-a73f07907ac8.png">

When I check it, then the margin looks right, which comess from the title. .rgh-align-issue-labels .js-issue-row .h4, .rgh-align-issue-labels .js-issue-row .d-inline-block.mr-1 { padding-right: 4px; }

posted by EaseTheWorld about 4 years ago

Can you please provide a link so WE can see the issue

posted by yakov116 about 4 years ago
posted by EaseTheWorld about 4 years ago

What browser are you testing in? Can you find the element in the developer tools and take a screenshot of it? So we can see what other CSS is being applied there.

posted by fregante about 4 years ago

I tested chrome88(mac) and chrome89(win), both reproducible. align-issue-labels checked issue-4117-screenshot-align-issue-labels-check align-issue-labels unchecked issue-4117-screenshot-align-issue-labels-uncheck

posted by EaseTheWorld about 4 years ago

After applying the fix above, margin looks fine.

posted by EaseTheWorld about 4 years ago

Ah the problem is that that h4 selector is being applied in the wrong feature, it should be part of conflict-marker, not align-issue-labels

Probably it should be avoided altogether and the conflict-marker should come with .ml-2

Either way the margins need to be reviewed (disabling conflict-marker and/or align-issue-labels) to ensure they're applied in the correct place

posted by fregante about 4 years ago

Fund this Issue

$0.00
Funded

Pull requests