[PR #5665] [MERGED] fix(common): remove double scrollbar in response pane #5306

New issue

Closed

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

kerem commented

2026-03-17 02:46:05 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5665
Author: @preeyaX
Created: 12/5/2025
Status: ✅ Merged
Merged: 12/9/2025
Merged by: @jamesgeorge007

Base: patch ← Head: fix/scroll-bar-issue-5545

📝 Commits (3)

2d5f01e fix: remove double scrollbar: Changed parent containers from auto to overflow-hidden in: default.vue (lines 7, 19, 25) and PaneLayout.vue (lines 15, 24, 32)
92cf4f6 merging upstream/main into this branch
365dd8f chore: add scroll for primary pane layout

📊 Changes

2 files changed (+5 additions, -5 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/app/PaneLayout.vue (+2 -2)
📝 packages/hoppscotch-common/src/layouts/default.vue (+3 -3)

📄 Description

Closes #5545

This PR attempts to fix the double scrollbar issue — when large responses were rendered in the UI and selected, two scrollbars appeared (one within the response content, and one in the main body). We only want to see the scrollbar in the response section, and not the one in the main body.

What's changed

The fix modified CSS overflow properties in two key layout files:

packages/hoppscotch-common/src/layouts/default.vue

Changed 3 parent containers from overflow-auto to overflow-hidden:

Line 7: Main content pane
Line 19: Secondary layout pane
Line 25: Nested content pane

packages/hoppscotch-common/src/components/app/PaneLayout.vue

Changed 3 parent containers from overflow-auto to overflow-hidden:

Line 15: Main pane container
Line 24: Top/primary pane section
Line 32: Bottom/secondary pane section

Notes to reviewers

Summary by cubic

Removed the double scrollbar when large responses are selected. Only the response pane now scrolls; the main layout no longer shows a second scrollbar.

Bug Fixes
- Set overflow-hidden on parent Pane containers in default.vue and PaneLayout.vue to prevent nested scrolling (fixes #5545).

^{Written for commit 365dd8fe4c. Summary will update automatically on new commits.}

_{🔄 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/5665 **Author:** [@preeyaX](https://github.com/preeyaX) **Created:** 12/5/2025 **Status:** ✅ Merged **Merged:** 12/9/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `patch` ← **Head:** `fix/scroll-bar-issue-5545` --- ### 📝 Commits (3) - [`2d5f01e`](https://github.com/hoppscotch/hoppscotch/commit/2d5f01e77358416ac21b8c893bc7fcb1b0fa9a0d) fix: remove double scrollbar: Changed parent containers from auto to overflow-hidden in: default.vue (lines 7, 19, 25) and PaneLayout.vue (lines 15, 24, 32) - [`92cf4f6`](https://github.com/hoppscotch/hoppscotch/commit/92cf4f6ead7cc7f6dd6bd67b64f50ba3557aa6e3) merging upstream/main into this branch - [`365dd8f`](https://github.com/hoppscotch/hoppscotch/commit/365dd8fe4cd9a726141d6dc207b8800c25a763da) chore: add scroll for primary pane layout ### 📊 Changes **2 files changed** (+5 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/app/PaneLayout.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/layouts/default.vue` (+3 -3) </details> ### 📄 Description   Closes #5545  This PR attempts to fix the double scrollbar issue — when large responses were rendered in the UI and selected, two scrollbars appeared (one within the response content, and one in the main body). We only want to see the scrollbar in the response section, and not the one in the main body. ### What's changed  The fix modified CSS overflow properties in two key layout files: 1. `packages/hoppscotch-common/src/layouts/default.vue` Changed 3 parent <Pane> containers from overflow-auto to overflow-hidden: - Line 7: Main content pane - Line 19: Secondary layout pane - Line 25: Nested content pane 2. `packages/hoppscotch-common/src/components/app/PaneLayout.vue` Changed 3 parent <Pane> containers from overflow-auto to overflow-hidden: - Line 15: Main pane container - Line 24: Top/primary pane section - Line 32: Bottom/secondary pane section  ### Notes to reviewers   --- ## Summary by cubic Removed the double scrollbar when large responses are selected. Only the response pane now scrolls; the main layout no longer shows a second scrollbar. - **Bug Fixes** - Set overflow-hidden on parent Pane containers in default.vue and PaneLayout.vue to prevent nested scrolling (fixes #5545). <sup>Written for commit 365dd8fe4cd9a726141d6dc207b8800c25a763da. Summary will update automatically on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>