[PR #5809] feat(collections): add horizontal scrolling for long request names #5361

New issue

Open

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

kerem commented

2026-03-17 02:49:04 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5809
Author: @saiakhil423
Created: 1/28/2026
Status: 🔄 Open

Base: main ← Head: feat/add-scrolling-for-long-request-names

📝 Commits (3)

5c9be2c feat(collections): add horizontal scrolling for long request names
c9a4720 fix(collections): improve accessibility and remove redundant click handlers
a065803 Merge branch 'main' into feat/add-scrolling-for-long-request-names

📊 Changes

5 files changed (+1774 additions, -3262 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/collections/Request.vue (+11 -2)
📝 packages/hoppscotch-common/src/components/collections/documentation/RequestItem.vue (+7 -1)
📝 packages/hoppscotch-common/src/components/collections/graphql/Request.vue (+11 -2)
📝 packages/hoppscotch-selfhost-web/vite.config.ts (+6 -1)
📝 pnpm-lock.yaml (+1739 -3256)

📄 Description

Closes #5785

What's changed

Added horizontal scrolling for long request names in collection side panel
Replaced truncate CSS class with overflow-x-auto and whitespace-nowrap to enable scrolling
Added tooltip to display full request name on hover for better UX
Preserved click functionality for request selection
Applied changes to all three request component types:
- REST Request component (Request.vue)
- GraphQL Request component (graphql/Request.vue)
- Documentation RequestItem component (documentation/RequestItem.vue)

Notes to reviewers

The scrollbar uses the existing global scrollbar styles from the project
Click functionality is preserved - users can still click on request names to select them
Tooltip shows full name on hover for quick reference
All linting checks passed (only pre-existing warnings unrelated to this change)

Summary by cubic

Adds horizontal scrolling and hover tooltips for long request names in the collections side panel, so names are readable without breaking layout. Works across REST, GraphQL, and Documentation items.

New Features
- Replaced truncation with horizontal scroll (overflow-x-auto + whitespace-nowrap).
- Added tooltip to show full request name on hover/focus.
- Preserved click-to-select behavior and existing scrollbar styles.
Bug Fixes
- Guard sitemap generation when BASE_URL is not set to prevent build errors.

^{Written for commit a0658030b1. 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/5809 **Author:** [@saiakhil423](https://github.com/saiakhil423) **Created:** 1/28/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/add-scrolling-for-long-request-names` --- ### 📝 Commits (3) - [`5c9be2c`](https://github.com/hoppscotch/hoppscotch/commit/5c9be2cc9f67099ac645d95bdb38fe5208291346) feat(collections): add horizontal scrolling for long request names - [`c9a4720`](https://github.com/hoppscotch/hoppscotch/commit/c9a47202e0edcd80f5452afefc24a0745314457f) fix(collections): improve accessibility and remove redundant click handlers - [`a065803`](https://github.com/hoppscotch/hoppscotch/commit/a0658030b19708402ea162c08737ac23ab861d82) Merge branch 'main' into feat/add-scrolling-for-long-request-names ### 📊 Changes **5 files changed** (+1774 additions, -3262 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/collections/Request.vue` (+11 -2) 📝 `packages/hoppscotch-common/src/components/collections/documentation/RequestItem.vue` (+7 -1) 📝 `packages/hoppscotch-common/src/components/collections/graphql/Request.vue` (+11 -2) 📝 `packages/hoppscotch-selfhost-web/vite.config.ts` (+6 -1) 📝 `pnpm-lock.yaml` (+1739 -3256) </details> ### 📄 Description Closes #5785 ### What's changed - Added horizontal scrolling for long request names in collection side panel - Replaced `truncate` CSS class with `overflow-x-auto` and `whitespace-nowrap` to enable scrolling - Added tooltip to display full request name on hover for better UX - Preserved click functionality for request selection - Applied changes to all three request component types: - REST Request component (`Request.vue`) - GraphQL Request component (`graphql/Request.vue`) - Documentation RequestItem component (`documentation/RequestItem.vue`) ### Notes to reviewers - The scrollbar uses the existing global scrollbar styles from the project - Click functionality is preserved - users can still click on request names to select them - Tooltip shows full name on hover for quick reference - All linting checks passed (only pre-existing warnings unrelated to this change)  --- ## Summary by cubic Adds horizontal scrolling and hover tooltips for long request names in the collections side panel, so names are readable without breaking layout. Works across REST, GraphQL, and Documentation items. - **New Features** - Replaced truncation with horizontal scroll (overflow-x-auto + whitespace-nowrap). - Added tooltip to show full request name on hover/focus. - Preserved click-to-select behavior and existing scrollbar styles. - **Bug Fixes** - Guard sitemap generation when BASE_URL is not set to prevent build errors. <sup>Written for commit a0658030b19708402ea162c08737ac23ab861d82. 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>