[PR #5906] [MERGED] fix(common): hide horizontal scrollbar in Firefox for URL input #5407

New issue

Closed

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

kerem commented

2026-03-17 02:51:29 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5906
Author: @Theproudcold
Created: 2/26/2026
Status: ✅ Merged
Merged: 3/2/2026
Merged by: @jamesgeorge007

Base: patch ← Head: fix/long-url-horizontal-scrollbar

📝 Commits (2)

3cb1724 fix(ui): hide horizontal scrollbar in Firefox for URL input
eec6d51 chore: translate comment to English for codebase consistency

📊 Changes

1 file changed (+5 additions, -0 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/smart/EnvInput.vue (+5 -0)

📄 Description

Description
Currently, long URLs cause a horizontal scrollbar to appear in Firefox because the global ::-webkit-scrollbar rule is WebKit-specific. This PR addresses the issue by applying scrollbar-width: none specifically to single-line CodeMirror instances (URL bar, headers, env variables) via the EnvInput wrapper.

Closes #5900

What's changed
Added scrollbar-width: none to .cm-scroller within the .autocomplete-wrapper.

Used the :deep() selector to ensure the style penetrates the scoped component into the CodeMirror structure.

Focused the fix on EnvInput, which prevents the scrollbar from being hidden in multi-line editors (like the request body or response viewer) where scrolling is still necessary.

Notes to reviewers
This fix specifically targets Firefox users. Since Chrome/Edge already respect the ::-webkit-scrollbar { height: 0 } rule, this change ensures a consistent, clean UI across all modern browsers without affecting the usability of larger text areas.

Summary by cubic

Hide the horizontal scrollbar in Firefox for single-line CodeMirror inputs (URL bar, headers, env vars) while keeping multi-line editor scrollbars, matching Chrome/Edge. Also translate a related comment to English.

Bug Fixes
- Applied scrollbar-width: none to .cm-scroller via :deep() in EnvInput.

^{Written for commit eec6d51471. Summary will update 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/5906 **Author:** [@Theproudcold](https://github.com/Theproudcold) **Created:** 2/26/2026 **Status:** ✅ Merged **Merged:** 3/2/2026 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `patch` ← **Head:** `fix/long-url-horizontal-scrollbar` --- ### 📝 Commits (2) - [`3cb1724`](https://github.com/hoppscotch/hoppscotch/commit/3cb17242eb0bcfbcd7472b30591613c36b49a74d) fix(ui): hide horizontal scrollbar in Firefox for URL input - [`eec6d51`](https://github.com/hoppscotch/hoppscotch/commit/eec6d514713f9be070d702cab26341e8d75308b8) chore: translate comment to English for codebase consistency ### 📊 Changes **1 file changed** (+5 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/smart/EnvInput.vue` (+5 -0) </details> ### 📄 Description Description Currently, long URLs cause a horizontal scrollbar to appear in Firefox because the global ::-webkit-scrollbar rule is WebKit-specific. This PR addresses the issue by applying scrollbar-width: none specifically to single-line CodeMirror instances (URL bar, headers, env variables) via the EnvInput wrapper. Closes #5900 What's changed Added scrollbar-width: none to .cm-scroller within the .autocomplete-wrapper. Used the :deep() selector to ensure the style penetrates the scoped component into the CodeMirror structure. Focused the fix on EnvInput, which prevents the scrollbar from being hidden in multi-line editors (like the request body or response viewer) where scrolling is still necessary. Notes to reviewers This fix specifically targets Firefox users. Since Chrome/Edge already respect the ::-webkit-scrollbar { height: 0 } rule, this change ensures a consistent, clean UI across all modern browsers without affecting the usability of larger text areas.  --- ## Summary by cubic Hide the horizontal scrollbar in Firefox for single-line CodeMirror inputs (URL bar, headers, env vars) while keeping multi-line editor scrollbars, matching Chrome/Edge. Also translate a related comment to English. - **Bug Fixes** - Applied scrollbar-width: none to .cm-scroller via :deep() in EnvInput. <sup>Written for commit eec6d514713f9be070d702cab26341e8d75308b8. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>