Code line numbers overlap with line content.

[AshkanArabim]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

What specific section or headline is this issue about?

"Try it"

What information was incorrect, unhelpful, or incomplete?

Nothing was incorrect.
There is a problem with the layout of the editable code box under "Try it" where line numbers overlap code and make code hard to read.

What did you expect to see?

For line numbers to not overlap with code.

Do you have any supporting links, references, or citations?

https://imgur.com/rt0YFBv

Do you have anything more you want to share?

Steps to reproduce:
1- Open "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" with Firefox.
2- Check the "Try it" section.

MDN metadata

Page report details

• Folder: en-us/web/javascript/reference/global_objects/object/assign
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/javascript/reference/global_objects/object/assign/index.md
• Last commit: mdn/content@3381c87
• Document last modified: 2022-07-28T09:27:35.000Z

[Josh-Cena]

I've also hit it in the past, and there are duplicate issues: mdn/content#13531

This isn't reproduced consistently in my browser—in fact, probably once every 100 visits—and usually works after a refresh. But I have a feeling this has something to do with wrong hydration order. @mdn/core-dev it's probably a pain but could you investigate?

[mirunacurtean]

Managed to temporarily reproduce it in Chrome but after navigating the site for a while it no longer occurs.

[anrusina]

Not a consistent repro. Navigation using links inside the page - persists the issue. Full Refresh (F5) of the page - clears the issue.
When issue occurs each line of code rendered as:

// each line of code
<div style="position: relative;">
  <div class="CodeMirror-gutter-wrapper" aria-hidden="true" contenteditable="false" style="left: 0px;">
    <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 1px;">2</div>
  </div>
  <pre class=" CodeMirror-line " role="presentation">
    <span role="presentation" style="padding-right: 0.1px;">
       <span class="cm-comment">// expected output: 23</span>
     </span>
   </pre>
 </div>
 // left section containing line numbers
 <div class="CodeMirror-gutters" style="height: 258px;">
    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;">
    </div>
 </div>

With proper render:

// each line of code
<div style="position: relative;">
   <div class="CodeMirror-gutter-wrapper" aria-hidden="true" contenteditable="false" style="left: -30px;">
      <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div>
   </div>
   <pre class=" CodeMirror-line " role="presentation">
      <span role="presentation" style="padding-right: 0.1px;">
         <span class="cm-comment">// expected output: 23</span>
      </span>
   </pre>
</div>
// left section containing line numbers
<div class="CodeMirror-gutters" style="height: 257px;">
    <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;">
    </div>
</div>

Main differences:
left: 0px vs left: -30px
width: 1px vs width: 21px
width: 1px; vs width:29px;

Looks like Code related component has an issue with maintaining showLineNumbers state, and sometimes got into state when numbers are shown but component set all styling as they are hidden.

[anrusina]

Was able to get repro with 3/5 rate.

1. Open page https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol ,
2. find `Symbol.isConcatSpreadable
3. Select and click "Open link in new tab"
4. Observe

Google Chrome Version 103.0.5060.134 (Official Build) (x86_64)

[caugner]

FWIW @NiedziolkaMichal has reported the issue upstream: codemirror/codemirror5#6953

[NiedziolkaMichal]

@caugner Yes, but issue is with our implementation of code mirror. Version 6 was released quite recently which I think wouldn't have this problem(we use 5.65.8), but its API is significantly different. I could work on upgrading it, but currently I have 6 PRs in BOB waiting for a review, so its likely that I would be wasting my time.

[caugner]

Duplicate of #976.