fix(verilog-editor): enable scrolling in Verilog code editor for large files

[Me-Priyank]

Fixes #849

Describe the changes you have made in this PR :

This PR fixes a scrolling issue in the Verilog code editor. Previously, users could only scroll by dragging the scrollbar - mouse wheel, arrow keys, and Page Up/Down did not work.

Root Cause:

The CSS rules in VerilogEditorPanel.vue set overflow: hidden !important on multiple elements, blocking all scroll input methods except direct scrollbar manipulation.

Fix:

Changed CSS overflow properties to allow proper scrolling:

• .code-window and .code-window .CodeMirror: overflow: visible (content flows naturally)
• .code-window .CodeMirror-scroll: overflow: auto (single scrollbar, responds to all inputs)

Screenshots of the UI changes (If any) -

N/A - This is a scrolling behavior fix, no visual changes.

---

Code Understanding and AI Usage:

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

If you used AI assistance:

• I have reviewed every single line of the AI-generated code
• I can explain the purpose and logic of each function/component I added
• I have tested edge cases and understand how the code handles them
• I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:

Problem: The Verilog code editor was unusable for large files because scrolling only worked by dragging the scrollbar.

Root cause analysis: Found that overflow: hidden !important was set on:

• .code-window
• .code-window .CodeMirror
• .code-window .CodeMirror-scroll

This blocked all scroll events except native scrollbar drag.

Solution approach:

1. Changed outer containers (.code-window, .CodeMirror) to overflow: visible - content flows naturally
2. Kept only .CodeMirror-scroll with overflow: auto - this is the correct scrolling container
3. This ensures a single scrollbar that responds to mouse wheel, keyboard, and drag

Why this specific implementation:

• Minimal changes (2 lines of CSS)
• Follows CodeMirror's intended scrolling architecture
• Single scrollbar (no duplicates)
• All scroll methods work: mouse wheel, arrow keys, Page Up/Down, drag

---

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

---

Note: Please check Allow edits from maintainers if you would like us to assist in the PR.

Summary by CodeRabbit

• Bug Fixes
  • Fixed editor display and scrolling behavior in the Verilog code editor to ensure content is fully visible and properly scrollable.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	1f8375d
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/69738d0c8425b500081ffba9
😎 Deploy Preview	https://deploy-preview-850--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 43 (🔴 down 4 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This pull request modifies the CSS overflow properties in VerilogEditorPanel.vue to enable scrolling functionality in the Verilog code editor. The changes replace overflow: hidden with overflow: visible and overflow: auto on the CodeMirror container elements (.code-window, .code-window .CodeMirror, .code-window .CodeMirror-scroll, and .code-window .CodeMirror pre). These adjustments allow the scroll container to respond to scrolling input methods while maintaining the visual layout of the editor component.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR successfully addresses issue #849 by modifying CSS overflow properties in VerilogEditorPanel.vue to enable mouse wheel, keyboard, and scrollbar scrolling in the Verilog editor.
Out of Scope Changes check	✅ Passed	All changes are strictly scoped to fixing the scrolling behavior issue; only CSS overflow properties were modified in the VerilogEditorPanel.vue file.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately summarizes the main change: enabling scrolling in the Verilog code editor for large files by modifying overflow CSS properties, which directly addresses the PR's core objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Me-Priyank]

@tachyons @Nihal4777 kindly review

[Me-Priyank]

@Nihal4777

[Me-Priyank]

@Nihal4777 can you please review

[Nihal4777]

Thanks @Me-Priyank for this fix.