Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: fix alignment of line number with code examples #16671

Closed
wants to merge 1 commit into from
Closed

docs: fix alignment of line number with code examples #16671

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/assets/scss/syntax-highlighter.scss
View file
Open in desktop
Expand Up @@ -118,6 +118,7 @@ pre[class*="language-"] {
font-variant-numeric: tabular-nums;
text-align: right;
width: 1.2em;
line-height: 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mind sharing which browser and its version as well as the OS to reproduce the problem?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it is working for me,
ok then, i am closing this PR issue is all yours

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I've updated that pull request to fix this issue.

}

div[class*="language-"].line-numbers-mode {
Expand Down