Skip to content

fix(extension): keep model picker search bar pinned while the model list scrolls - #5924

Merged
iscekic merged 1 commit into
mainfrom
kwf/in-the-web-extension-model-p-0309
Sep 7, 2026
Merged

fix(extension): keep model picker search bar pinned while the model list scrolls#5924
iscekic merged 1 commit into
mainfrom
kwf/in-the-web-extension-model-p-0309

Conversation

@iscekic

@iscekic iscekic commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Request

In the web extension model picker, keep the search bar pinned to the top of the list while the model list scrolls under it. The search field must stay visible and usable at every scroll position, keep its focus and typed text while scrolling, and must not overlap the first row or clip the list. Reproduce the current behaviour first (record the search bar scrolling out of view), then fix it and prove the fix on the same live picker with a recording that scrolls a long model list.

Changelog for users

  • In the web extension model picker, the search bar now stays pinned below the dialog header while the model list scrolls beneath it, so search is visible and usable at every scroll position.
  • The pinned search bar keeps its focus and typed text while the list scrolls, so a query can be typed or refined from anywhere in the list.
  • Rows scrolling under the pinned bar are hidden behind its opaque background instead of bleeding through the search input.

Changelog for maintainers

  • Start at the search-bar wrapper in apps/extension/entrypoints/sidepanel/model-picker.tsx: it is now sticky top-14 z-10 with bg-surface-background; the top-14 offset must keep matching the dialog header's h-14 height, so change the two together.
  • The pin relies on the search bar and the model list sharing the dialog's single overflow-y-auto scroll container; splitting the dialog into separate scroll panes detaches the bar.
  • The opaque background is load-bearing: rows pass underneath the bar during scroll and would show through the input otherwise.
  • New tests in apps/extension/entrypoints/sidepanel/model-picker.test.tsx pin the sticky contract via classes (jsdom has no layout engine and scrollIntoView is stubbed) and assert focus plus typed text survive a programmatic scroll; they cannot catch pixel-level overlap, which is what the live-picker captures cover.
  • The e2e proof is two screenshots of the fixed picker at different scroll positions; no capture of the pre-fix behaviour is included, so the before/after contrast rests on the diff.

E2E proof

[e1] pinned search bar stays visible while the model list scrolls — e2e-web-extension/e1-scroll-mid.png

[e1] pinned search bar stays visible while the model list scrolls — e2e-web-extension/e1-scrolled.png

…ist scrolls

In the web extension model picker, keep the search bar pinned to the top of the list while the model list scrolls under it. The search field must stay visible and usable at every scroll position, keep its focus and typed text while scrolling, and must not overlap the first row or clip the list. Reproduce the current behaviour first (record the search bar scrolling out of view), then fix it and prove the fix on the same live picker with a recording that scrolls a long model list.
@iscekic iscekic added the human-ready The PR is ready for human review. label Sep 7, 2026
@iscekic
iscekic merged commit 7ebd37a into main Sep 7, 2026
17 checks passed
@iscekic
iscekic deleted the kwf/in-the-web-extension-model-p-0309 branch September 7, 2026 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

human-ready The PR is ready for human review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants