[PR #4106] [CLOSED] fix: huge code scroll issue #4670

New issue

Closed

opened 2026-03-17 02:11:02 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:11:02 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4106
Author: @ajmalmohad
Created: 6/5/2024
Status: ❌ Closed

Base: main ← Head: fix/huge-code-scroll

📝 Commits (1)

bdd9ee5 fix: huge code scroll issue

📊 Changes

7 files changed (+21 additions, -7 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/http/Headers.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/Parameters.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/PreRequestScript.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/RawBody.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/RequestVariables.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/Tests.vue (+3 -1)
📝 packages/hoppscotch-common/src/components/http/URLEncodedParams.vue (+3 -1)

📄 Description

Closes #4050, #4007

Description

The codemirror was not functioning correctly on scroll when we have large request bodies, parts of the body was not rendered and it would only render when we click on it. I wrapped the editor with a div, applying absolute and inset on the the referenced div was causing the issue. I've changed in other places where this same issue exists

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

Before vs After
screen-capture.webm

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4106 **Author:** [@ajmalmohad](https://github.com/ajmalmohad) **Created:** 6/5/2024 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/huge-code-scroll` --- ### 📝 Commits (1) - [`bdd9ee5`](https://github.com/hoppscotch/hoppscotch/commit/bdd9ee522d98504137313e8ac8c9c45e3715361d) fix: huge code scroll issue ### 📊 Changes **7 files changed** (+21 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/http/Headers.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/Parameters.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/PreRequestScript.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/RawBody.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/RequestVariables.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/Tests.vue` (+3 -1) 📝 `packages/hoppscotch-common/src/components/http/URLEncodedParams.vue` (+3 -1) </details> ### 📄 Description   Closes #4050, #4007 ### Description The codemirror was not functioning correctly on scroll when we have large request bodies, parts of the body was not rendered and it would only render when we click on it. I wrapped the editor with a div, applying absolute and inset on the the referenced div was causing the issue. I've changed in other places where this same issue exists  ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information Before vs After [screen-capture.webm](https://github.com/hoppscotch/hoppscotch/assets/55492635/48509993-0928-4fc4-8fd0-4f4569f6f96e) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>