[Bug] Line Numbers Overflow Outside Code Editor Container

[rachel-d-07]

Summary

The code editor viewport height is not properly synchronized with the displayed line numbers. The editor container visually ends around line 22, while the line-number gutter continues displaying up to line 28 outside the bordered editor area. This causes hidden code lines, inconsistent scrolling behavior, and inaccurate visual mapping between the editor content and line numbers.

---

Steps To Reproduce

1. Open the code editor page.
2. Paste or load a Python file containing more than 22 lines of code.
3. Observe the editor border and line-number gutter.
4. Scroll inside the editor.
5. Notice that line numbers continue beyond the visible editor container while some code lines remain partially hidden below the border.

---

Expected Behavior

• The editor container height should fully match the visible code area.
• Line numbers should remain aligned with the visible code lines.
• All visible lines should stay inside the bordered editor container.
• Scrolling should behave consistently without clipping or hidden lines.

---

Actual Behavior

• The editor border visually ends before all displayed line numbers are covered.
• Line numbers continue appearing outside the editor boundary.
• Some code lines become hidden below the visible editor area.
• Scrolling causes visual misalignment between the editor content and line-number gutter.

---

Environment

• OS: Windows 10/11
• Browser (if frontend): Microsoft Edge / Chrome
• Python version (if backend): N/A

---

Logs/Screenshots

Screenshot attached showing:

• Editor border ending near line 22
• Line numbers continuing until line 28
• Hidden code area below the visible editor container

[Nsiddhi08]

Hi, I’d like to work on this issue under GSSoC'26.

I checked the screenshots and reproduction steps. It looks like the editor container height and the line-number gutter are getting out of sync, which is causing the overflow and hidden lines issue.

I’ll look into the editor styling and scrolling behavior to fix the alignment and keep everything properly contained inside the editor view.

Kindly assign this issue to me.

[Falehaqazi]

Hi, I'm a GSSoC 2026 contributor and would like to work on this. Could you assign it to me?

[Nandini868686]

I would like to work on this issue under GSSoC 2026. Please assign it to me.

[ayushk9872]

Hi, @imDarshanGK
I'm a GSSoC 2026 contributor and i would like to work on this. Could you assign it to me?

[rachel-d-07]

Hi @imDarshanGK, I've submitted a fix for this issue in PR #518

The line numbers were overflowing outside the editor border because the
gutter div height was not synced with the textarea's visible height.

Fixed by using requestAnimationFrame to clip the line numbers div height
to match the editor's clientHeight after each render cycle.