Skip to content

Conversation

@aseemxs
Copy link
Contributor

@aseemxs aseemxs commented Nov 21, 2025

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Description

The model selection dropdown in Amazon Q chat was getting cut off at the bottom, showing only 2-3 out of 4 available models. This was caused by overflow clipping in the JCEF webview environment.

Solution:
Implemented a custom modal dropdown that replaces the native <select> element specifically for model selection. The modal overlay approach ensures the dropdown appears above all other UI elements without
z-index conflicts.

Key features:

  • Modal overlay with semi-transparent background
  • Dynamic font sizing (9px-12px) based on model name length to prevent text truncation
  • Position-absolute trigger to prevent shifting when changing selections
  • Only applies to model dropdown (detected by checking for "Claude"/"Sonnet"/"Opus"/"Haiku" in options)
  • JetBrains-specific implementation via Browser.kt, no mynah-ui changes required

Before: Dropdown cut off, showing only 2-3 options
After: All 4 model options visible in centered modal

Note: This is a temporary workaround. Future improvements could include migrating to a proper mynah-ui component or refining the positioning logic.

Demo :

Screen.Recording.2025-11-21.at.2.48.43.PM.mov
Screen.Recording.2025-12-01.at.7.59.08.AM.mov

Checklist

  • My code follows the code style of this project
  • I have added tests to cover my changes (UI-only change in Browser.kt webview, difficult to test)
  • A short description of the change has been added to the CHANGELOG if the change is
    customer-facing in the IDE. (Will add)
  • I have added metrics for my changes (if required) (No metrics needed for UI fix)

License

I confirm that my contribution is made under the terms of the Apache 2.0 license.

CHANGELOG entry to add:

Fixed

  • Amazon Q Chat: Fixed model selection dropdown being cut off at the bottom in JetBrains IDE

@aseemxs aseemxs marked this pull request as ready for review November 21, 2025 23:39
@laileni-aws laileni-aws changed the title fix(fix): add custom modal dropdown for model selection fix(amazonq): add custom modal dropdown for model selection Nov 22, 2025
@laileni-aws
Copy link
Contributor

laileni-aws commented Nov 22, 2025

Can you add user experience demo to this PR?

@aseemxs aseemxs requested a review from a team as a code owner December 1, 2025 16:01
Replaces native select element with a custom modal dropdown to fix
visibility issues where the dropdown menu was getting cut off at the bottom.

Implementation includes:
- Modal overlay to ensure proper display above chat UI
- Dynamic font sizing based on model name length
- Stable positioning to prevent shifting when changing selections

Note: Temporary workaround that could be refined with future iterations.
@aseemxs aseemxs force-pushed the fix/model-dropdown branch from ed71d4e to dcb775a Compare December 1, 2025 16:13
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.

3 participants