Prism line numbers spacing

[Dino-Martinez]

What package has an issue

@mantine/prism

Describe the bug

Creating a Prism or Prism Tab component with line numbers on causes an offset issue with snippets longer than 9 lines. When line numbers are 2 digits or more, they are offset to the right by that extra character from the first 9 lines, causing a weird shift that adds visual confusion. I presume it would happen again for every extra digit, but I'm not sure it was built for snippets much longer than 100 lines.

In which browser did the problem occur

All browsers

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/mantine-prism-issue-o0o6x3

Do you know how to fix the issue

Maybe

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

It appears that the issue is caused by the 'padding-right: 24px' style applied to the classes.lineNumber class.

Possibly having dynamic styles based on the number of digits and using ch would suffice? Something like a conditional className={digits(lineNumber) === 1 ? classes.lineNumber : class.lineNumberTwoDigit}. This would only work for 1 and 2 digit numbers, but could be extended to more digits and extracted into a function.

Or potentially replacing the padding with unselectable prism.token.plain elements? Calculating the number of spaces needed (some maximum - the number of digits in the line number) and then creating that many single-plain-tokens might work and would be a bit more dynamic than the previous suggestion.

[auronsan1st]

#1156

[rtivital]

Fixed in 4.1.2