docs: fix alignment of line number with code examples #16671
Conversation
eslint-github-bot
bot
added
triage
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Let's wait for this PR #16669. It includes some changes in styling also. |
| @@ -118,6 +118,7 @@ pre[class*="language-"] { | |||
| font-variant-numeric: tabular-nums; | |||
| text-align: right; | |||
| width: 1.2em; | |||
| line-height: 0; | |||
There was a problem hiding this comment.
Mind sharing which browser and its version as well as the OS to reproduce the problem?
There was a problem hiding this comment.
I am seeing this problem in
Browser - Firefox
Version - 108.0.1 (latest)
Operating system - Windows 10 Pro (64-bit)
I am not getting this problem in Chrome browser but this fix (PR) is not affecting that
There was a problem hiding this comment.
Thanks, I can reproduce it in Firefox.
Seems the line-height for code has no effect under firefox, I'll see why it happens.
Actually I can find the problem even before my pull request (screenshots from https://eslint.org/docs/latest/rules/array-callback-return under firefox):
My pull request happened to expose it :)
There was a problem hiding this comment.
So I compared the css rules before to those after my pull request and found there was one rule missing from my pr. Applying that rule to .line-numbers-wrapper seems to fix the problem under firefox:
.line-numbers-wrapper {
font-variant-ligatures: none;
}
Could you try it and verify if it works for you? I reckon it doesn't make sense to set line-height to 0, though it did work in this case under firefox.
There was a problem hiding this comment.
Yes, it is working for me,
ok then, i am closing this PR issue is all yours
There was a problem hiding this comment.
Thanks, I've updated that pull request to fix this issue.
eslint-github-bot
bot
added
the
archived due to age
Prerequisites checklist
What is the purpose of this pull request? (put an "X" next to an item)
[x] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:
What changes did you make? (Give an overview)
just added a line height property to syntax-highlighter.scss file for making the alignment of line numbers with the code in examples
before.
after this PR
Is there anything you'd like reviewers to focus on?