Auto scroll to show this item when its tab becomes active by dssagar93 · Pull Request #6080 · usebruno/bruno

dssagar93 · 2025-11-12T18:16:34Z

Description

Contribution Checklist:

The pull request only addresses one issue or adds one feature.
The pull request does not introduce any breaking changes
I have added screenshots or gifs to help explain the change if applicable.
[z] I have read the contribution guidelines.
Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

Bug Fixes
- Collection items now automatically scroll into view when their corresponding tab becomes active, improving navigation experience.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

helloanoop · 2025-11-12T18:42:05Z

@dssagar93 Thanks for the PR! Would you mind sharing a short demo video to showcase the feature in action?

dssagar93 · 2025-11-13T13:46:38Z

Hi @helloanoop, sure, here you go, added a small clip to showcase the feature

Video.Project.Crop.mp4

dssagar93 · 2025-11-13T13:49:00Z

Also, here's what happens right now in the current release build -- without the fix

Video.Original.Crop.mp4

dssagar93 · 2025-11-13T20:08:35Z

@Pragadesh44-Bruno , @lohit-bruno , @helloanoop - can somebody review it please? Thanks

Pragadesh44-Bruno · 2025-11-15T09:41:59Z

@dssagar93 Thanks for the PR! I will review this and share it with the team for further review and merging.

dssagar93 · 2025-11-15T11:11:00Z

@Pragadesh44-Bruno Sounds good.

dssagar93 · 2025-11-20T18:41:13Z

Hello folks, any reason or issues? What's with the holdup? @Pragadesh44-Bruno

dssagar93 · 2025-12-02T10:34:32Z

Rain check. Did you folks review it internally? Any updates?

helloanoop · 2025-12-02T22:15:30Z

Hey @dssagar93 Just checked out your changes. Woeks like a charm 🔥 good work!

@sreelakshmi-bruno Can we prioritise to get this merged in December?

…roll-on-tab-change

coderabbitai · 2025-12-03T23:46:44Z

Walkthrough

Adds an auto-scroll effect to collection items in the sidebar that triggers when a tab becomes active. The effect scrolls the item into view with smooth behavior, wrapped in error handling for compatibility with environments lacking smooth scroll support.

Changes

Cohort / File(s)	Summary
Sidebar Collection Item Auto-Scroll `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js`	Adds effect hook that auto-scrolls collection item into view when its corresponding tab becomes active; uses `scrollIntoView` with smooth behavior and try-catch for cross-browser compatibility

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Verify effect dependency array (isTabForItemActive) is correctly configured
Confirm try-catch error handling is appropriate for the smooth scroll compatibility use case
Check that ref is properly initialized and won't cause null reference issues

Poem

📌 A sidebar scroll, so smooth and neat,
When tabs take focus, items greet,
No more hunting through endless lists,
Your active request? Never missed. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: auto-scrolling a collection item into view when its tab becomes active, matching the core functionality implemented.
Linked Issues check	✅ Passed	The PR implements the exact requirement from issue #6029: auto-scrolling the selected request item into view when its tab becomes active, improving navigation in the sidebar.
Out of Scope Changes check	✅ Passed	All changes are scoped to the CollectionItem component and directly address the linked issue without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js (1)
107-116: Auto-scroll effect looks correct; consider adding a non-smooth fallback.

The effect correctly ties sidebar scrolling to isTabForItemActive and safely guards on ref.current, which should satisfy the issue requirement without regressions.

If you want slightly more robust behavior in environments that don’t support smooth scrolling, you could fall back to a basic scrollIntoView() instead of doing nothing on error:
  useEffect(() => {
    if (isTabForItemActive && ref.current) {
      try {
        ref.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      } catch (err) {
-        // ignore scroll errors (some environments may not support smooth scrolling)
+        // Fallback without smooth behavior if options aren't supported
+        try {
+          ref.current.scrollIntoView();
+        } catch (_) {
+          // ignore if even the basic call is unsupported
+        }
       }
     }
   }, [isTabForItemActive]);

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ebe0203 and 9972eb3.

📒 Files selected for processing (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation, never tabs
Use single quotes for strings instead of double quotes
Always add semicolons at the end of statements
No trailing commas in code
Always use parentheses around parameters in arrow functions, even for single parameters
For multiline constructs, put opening braces on the same line with a minimum of 2 elements for multiline formatting
No newlines inside function parentheses
Space before and after the arrow in arrow functions: () => {}
No space between function name and parentheses: func() not func ()
Semicolons should go at the end of the line, not on a new line
Function names should be concise and descriptive
Add JSDoc comments to provide details to abstractions
Avoid single-line abstractions where all that is being done is increasing the call stack with one additional function
Add meaningful comments to explain complex code flow instead of obvious comments

Files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js (1)

packages/bruno-app/src/selectors/tab.js (2)

isTabForItemActive (3-5)

isTabForItemActive (3-5)

Auto scroll to show this item when its tab becomes active

d9a3f74

pull-request-size bot added the size/S label Nov 12, 2025

Merge branch 'usebruno:main' into feature/auto-scroll-on-tab-change

cf19035

dssagar93 marked this pull request as ready for review November 12, 2025 18:25

dssagar93 requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners November 12, 2025 18:25

Added semi colon

f7ea1f8

dssagar93 marked this pull request as draft November 14, 2025 11:37

dssagar93 marked this pull request as ready for review November 14, 2025 11:37

helloanoop assigned sreelakshmi-bruno and bijin-bruno Dec 2, 2025

Pragadesh44-Bruno approved these changes Dec 3, 2025

View reviewed changes

Merge branch 'main' of github.com:usebruno/bruno into feature/auto-sc…

9972eb3

…roll-on-tab-change

coderabbitai bot reviewed Dec 3, 2025

View reviewed changes

bijin-bruno approved these changes Dec 4, 2025

View reviewed changes

bijin-bruno merged commit c4ff291 into usebruno:main Dec 4, 2025
8 checks passed

coderabbitai bot mentioned this pull request Dec 10, 2025

Design improvements #6372

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto scroll to show this item when its tab becomes active#6080

Auto scroll to show this item when its tab becomes active#6080
bijin-bruno merged 4 commits intousebruno:mainfrom
dssagar93:feature/auto-scroll-on-tab-change

dssagar93 commented Nov 12, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

helloanoop commented Nov 12, 2025

Uh oh!

dssagar93 commented Nov 13, 2025 •

edited

Loading

Uh oh!

dssagar93 commented Nov 13, 2025

Uh oh!

dssagar93 commented Nov 13, 2025

Uh oh!

Pragadesh44-Bruno commented Nov 15, 2025

Uh oh!

dssagar93 commented Nov 15, 2025

Uh oh!

dssagar93 commented Nov 20, 2025

Uh oh!

dssagar93 commented Dec 2, 2025

Uh oh!

helloanoop commented Dec 2, 2025

Uh oh!

coderabbitai bot commented Dec 3, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

dssagar93 commented Nov 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contribution Checklist:

Publishing to New Package Managers

Summary by CodeRabbit

Uh oh!

helloanoop commented Nov 12, 2025

Uh oh!

dssagar93 commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dssagar93 commented Nov 13, 2025

Uh oh!

dssagar93 commented Nov 13, 2025

Uh oh!

Pragadesh44-Bruno commented Nov 15, 2025

Uh oh!

dssagar93 commented Nov 15, 2025

Uh oh!

dssagar93 commented Nov 20, 2025

Uh oh!

dssagar93 commented Dec 2, 2025

Uh oh!

helloanoop commented Dec 2, 2025

Uh oh!

coderabbitai bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dssagar93 commented Nov 12, 2025 •

edited by coderabbitai bot

Loading

dssagar93 commented Nov 13, 2025 •

edited

Loading

coderabbitai bot commented Dec 3, 2025 •

edited

Loading