Scroll active item into view in composer menu

[naufalw]

What Changed

• Attach a ref to the list container and query the item by its data- attribute to call scrollIntoView.
• Add data-composer-item-id on items to support the lookup.

Why

When navigating the @ file/command popover with arrow keys, the highlighted item's CSS class updated but the list never scrolled. Holding arrow down past 8+ items left the active item hidden behind the bottom edge of the max-h-64 container.

UI Changes

Before: enter @ then filename, if result is more than 8, hold down arrow down, the highlighted element is hidden

Area.2026-03-30.08.24.21.mp4

After: the highlighted element is scrolled into view

Area.2026-03-30.08.26.02.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI-only change that adds scrollIntoView behavior when the active item changes. Main risk is minor scrolling/hover styling regressions in the command popover.

Overview
Keeps the composer @/slash-command popover usable with long lists by automatically scrolling the currently active (keyboard-highlighted) item into view.

Adds a useLayoutEffect with a container ref that finds the active row via a new data-composer-item-id attribute and calls scrollIntoView({ block: "nearest" }), and tweaks CommandItem classes to preserve styling while hovering/highlighting.

^{Written by Cursor Bugbot for commit 4db73ec. This will update automatically on new commits. Configure here.}

Note

Scroll active item into view in the composer command menu

• Adds a useLayoutEffect in ComposerCommandMenu that calls scrollIntoView({ block: "nearest" }) on the active item whenever activeItemId changes, using a data-composer-item-id attribute as the selector target.
• Removes hover background and text color changes from ComposerCommandMenuItem to avoid visual conflicts with the existing data-highlighted styles.

^{Macroscope summarized 4db73ec.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 88fdd0bf-94e0-42a6-b75b-60d0ace29103

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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