Skip to content

Comments

fix(webview): remove double scrollbar in model selector#5036

Closed
therajusah wants to merge 3 commits intoKilo-Org:mainfrom
therajusah:fix/model-selector-double-scrollbar
Closed

fix(webview): remove double scrollbar in model selector#5036
therajusah wants to merge 3 commits intoKilo-Org:mainfrom
therajusah:fix/model-selector-double-scrollbar

Conversation

@therajusah
Copy link

@therajusah therajusah commented Jan 14, 2026

  • Removed overflow-hidden from PopoverContent className
  • Removed nested max-h-82 overflow-y-auto div
  • contentClassName prop now controls all scroll behavior

Fixes #5033

Context

The model selector dropdown was displaying two scrollbars when many models were configured. This created unpredictable scrolling behavior where:

  • The search input would become hidden when scrolling the model list
  • Edit controls were hidden at the bottom of one scrollbar
  • Users had to manage two independent scroll positions

Implementation

Root Cause: Two nested divs both had overflow-y-auto, creating duplicate scrollable containers:

  1. PopoverContent (line 275) with overflow-hidden combined with contentClassName="max-h-[300px] overflow-y-auto"
  2. Inner div (line 301) with hardcoded max-h-82 overflow-y-auto

Solution:

  • Removed overflow-hidden from PopoverContent className to allow contentClassName to control overflow
  • Removed the hardcoded max-h-82 overflow-y-auto from the inner div
  • Now only the contentClassName prop (passed from ModelSelector.tsx) controls all scroll behavior

Screenshots

Before:
image

After:
image

Video:

Screen.Recording.2026-01-14.at.10.50.36.PM.mov

How to Test

  1. Configure multiple models (10+) in the extension settings to enable scrolling
  2. Open the model selector dropdown in the chat interface
  3. Verify that only one scrollbar appears
  4. Scroll through the model list
  5. Confirm the search input remains visible at the top while scrolling
  6. Verify all models are accessible and selectable

Get in Touch

Discord: therajusah

- Removed overflow-hidden from PopoverContent className
- Removed nested max-h-82 overflow-y-auto div
- contentClassName prop now controls all scroll behavior

Fixes Kilo-Org#5033
@changeset-bot
Copy link

changeset-bot bot commented Jan 14, 2026

🦋 Changeset detected

Latest commit: f1da37c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Collaborator

@kevinvandijk kevinvandijk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi there! Thank you for the PR. When testing I noticed the search bar in the model selector now scrolls out of view which should not happen according to the PR description. Also, this change seems to inadvertently affect the mode selector causing it to infinitely grow in height. Could you look into this?

@kevinvandijk
Copy link
Collaborator

Thanks once again but closing this right now in favor of #5583

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Edit Model is hidden and scroll bars are messed up

2 participants