Horizontal scrollbar is always visible when lineNumbers is true

[abutalebi]

I use prism-react-editor in my NextJS app.
If I set the lineNumbers flag to true, then the horizontal scrollbar is always visible.
When the lineNumbers flag is false, the editor shows the horizontal scrollbar when necessary.
This behaviour will not change if wordWrap is true or false.
Is it possible to make the horizontal scrollbar appear only when needed while lineNumbers is enabled?

[jonpyt]

I have never observed this issue. It is likely caused by external styles affecting either the editor itself or its parent element.

I would recommend you do two things:

• Inspect your webpage using developer tools to identify which styles are causing the issue
• Confirm whether the issue can be observed in the Next.js example

[abutalebi]

Thank you for responding.
Yes, I saw the issue in Next.js example as well.
Since you confirmed there is no issue there, I took a closer look and found out that this issue is caused by Grammarly.
When I disable Grammarly, it will work as expected.

[jonpyt]

Good to know.

Unfortunately, I'm unable to reproduce your issue with the Grammarly extension added in Google Chrome, so I cannot fix it.

Have you found a simple solution to the problem?

[abutalebi]

Yes, I set
textareaProps={{ "data-gramm": "false" }}

And thanks for this full-featured lightweight editor.

[jonpyt]

Yes, I set
textareaProps={{ "data-gramm": "false" }}

Cool, although I'm not sure that this attribute should be added by the library itself. The editor just uses a textarea, and Grammarly works just fine (ignoring the scrollbar issue), and therefore shouldn't be disabled. Identifying the cause of the issue and finding a CSS fix would be preferred.