[PR #2969] [MERGED] feat: added scrollbar for tabs #4165

New issue

Closed

opened 2026-03-17 01:43:28 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:43:28 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2969
Author: @anwarulislam
Created: 4/5/2023
Status: ✅ Merged
Merged: 4/6/2023
Merged by: @AndrewBastin

Base: staging ← Head: feat/tab-scrollbar

📝 Commits (2)

7b31df0 feat: tab scrollbar added
debe587 fix: initial scrollbar hiding issue

📊 Changes

1 file changed (+106 additions, -29 deletions)

View changed files

📝 packages/hoppscotch-ui/src/components/smart/Windows.vue (+106 -29)

📄 Description

`🤖 Generated by Copilot at 06590dd`

Summary

✨💄🔧

Added a custom scrollbar/slider for the tabs in the Windows component. This improves the user experience and usability of the hoppscotch-ui package by allowing the user to navigate through multiple tabs more easily. The scrollbar/slider is a range input that controls the scroll position of the Windows.vue file.

Oh, we're the coders of the Windows component
And we've added a scrollbar/slider so fine
It hides away until you hover over it
And it scrolls the tabs with a range input and a scrollPos var

Walkthrough

Add a custom scrollbar/slider for the tabs in Windows.vue (link, link, link, link, link)

Use the group-tabs class to show or hide the slider on hover (link, link)
Use the input element of type range as the slider (link)
Bind the slider to the thumbPosition reactive variable and the scrollThumb.width computed property (link, link)
Set the max attribute of the slider to the MAX_SCROLL_VALUE constant (link, link)
Watch the thumbPosition and tabEntries values and update the scroll position accordingly (link)

Refactor the props definition to use the withDefaults function (link)
- Import the watch function from vue (link)
- Specify the default values of the props in a type-safe way (link)

_{🔄 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/2969 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 4/5/2023 **Status:** ✅ Merged **Merged:** 4/6/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `staging` ← **Head:** `feat/tab-scrollbar` --- ### 📝 Commits (2) - [`7b31df0`](https://github.com/hoppscotch/hoppscotch/commit/7b31df09c1de00ac7bb1c78165deff7f06c5f45e) feat: tab scrollbar added - [`debe587`](https://github.com/hoppscotch/hoppscotch/commit/debe58765ffb39377fd77e7ea565866f879c2486) fix: initial scrollbar hiding issue ### 📊 Changes **1 file changed** (+106 additions, -29 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-ui/src/components/smart/Windows.vue` (+106 -29) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at 06590dd</samp> ### Summary :sparkles::lipstick::wrench:  Added a custom scrollbar/slider for the tabs in the Windows component. This improves the user experience and usability of the `hoppscotch-ui` package by allowing the user to navigate through multiple tabs more easily. The scrollbar/slider is a range input that controls the scroll position of the `Windows.vue` file. > _Oh, we're the coders of the Windows component_ > _And we've added a scrollbar/slider so fine_ > _It hides away until you hover over it_ > _And it scrolls the tabs with a range input and a `scrollPos` var_ ### Walkthrough * Add a custom scrollbar/slider for the tabs in `Windows.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L4-R4), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R98-R112), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L138-R170), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L244-R289), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R345-R378)) - Use the `group-tabs` class to show or hide the slider on hover ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L4-R4), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R345-R378)) - Use the `input` element of type `range` as the slider ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R98-R112)) - Bind the slider to the `thumbPosition` reactive variable and the `scrollThumb.width` computed property ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R98-R112), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L138-R170)) - Set the `max` attribute of the slider to the `MAX_SCROLL_VALUE` constant ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R98-R112), [link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L244-R289)) - Watch the `thumbPosition` and `tabEntries` values and update the scroll position accordingly ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L244-R289)) * Refactor the `props` definition to use the `withDefaults` function ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L113-R128)) - Import the `watch` function from `vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L113-R128)) - Specify the default values of the props in a type-safe way ([link](https://github.com/hoppscotch/hoppscotch/pull/2969/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L113-R128)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>