[PR #3013] [MERGED] feat: scroll to show the new active tab header #4189

New issue

Closed

opened 2026-03-17 01:44:49 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:44:49 +03:00

Owner

📋 Pull Request Information

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

Base: release/2023.4.2 ← Head: feat/scroll-to-new-active-tab-header

📝 Commits (4)

759fdc2 feat: scroll to show the new active tab header
77ac32e fix: scrollbar position issue
8eda0fe chore: updated by native scrolling api with intersection observer
16663de chore: improve tab active styles

📊 Changes

1 file changed (+95 additions, -25 deletions)

View changed files

📝 packages/hoppscotch-ui/src/components/smart/Windows.vue (+95 -25)

📄 Description

Description

Improved the tab head section. When a tab selection is updated automatically (like when we click on a request in a collection which has a tab open or we click on add new tab button), the tab headers section should scroll to show the new active tab header.

Walkthrough

Import and use nextTick function from vue to manipulate scroll position of tab container based on active tab ID (link, link)
Define and use TAB_WIDTH constant to calculate tab container width and tab position (link)
Add watch effect to monitor changes of modelValue prop and scroll to active tab if needed (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/3013 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 4/21/2023 **Status:** ✅ Merged **Merged:** 5/9/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.4.2` ← **Head:** `feat/scroll-to-new-active-tab-header` --- ### 📝 Commits (4) - [`759fdc2`](https://github.com/hoppscotch/hoppscotch/commit/759fdc2029132e2985f2aa2b0caea6cc6c3de9d4) feat: scroll to show the new active tab header - [`77ac32e`](https://github.com/hoppscotch/hoppscotch/commit/77ac32ebafcdaca305638da3f7daa687c2aa4de6) fix: scrollbar position issue - [`8eda0fe`](https://github.com/hoppscotch/hoppscotch/commit/8eda0feafbe443589501acd617a5ed70b5f4924d) chore: updated by native scrolling api with intersection observer - [`16663de`](https://github.com/hoppscotch/hoppscotch/commit/16663de5258ca1367d0e74ea0be2ccd741fdd8ee) chore: improve tab active styles ### 📊 Changes **1 file changed** (+95 additions, -25 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-ui/src/components/smart/Windows.vue` (+95 -25) </details> ### 📄 Description ### Description Improved the tab head section. When a tab selection is updated automatically (like when we click on a request in a collection which has a tab open or we click on add new tab button), the tab headers section should scroll to show the new active tab header. ### Walkthrough * Import and use `nextTick` function from `vue` to manipulate scroll position of tab container based on active tab ID ([link](https://github.com/hoppscotch/hoppscotch/pull/3013/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L134-R142), [link](https://github.com/hoppscotch/hoppscotch/pull/3013/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R307-R333)) * Define and use `TAB_WIDTH` constant to calculate tab container width and tab position ([link](https://github.com/hoppscotch/hoppscotch/pull/3013/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L189-R200)) * Add `watch` effect to monitor changes of `modelValue` prop and scroll to active tab if needed ([link](https://github.com/hoppscotch/hoppscotch/pull/3013/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R307-R333)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>