fix(amazonq): add custom modal dropdown for model selection #6120
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
manodnyab
reviewed
Nov 21, 2025
.../jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt
Outdated
Show resolved
Hide resolved
laileni-aws
changed the title
Contributor
|
Can you add user experience demo to this PR? |
manodnyab
reviewed
Nov 22, 2025
.../jetbrains-community/src/software/aws/toolkits/jetbrains/services/amazonq/webview/Browser.kt
Outdated
Show resolved
Hide resolved
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
force-pushed
the
fix/model-dropdown
branch
from
ed71d4e to
dcb775a
Compare
laileni-aws
approved these changes
Dec 1, 2025
manodnyab
reviewed
Dec 2, 2025
| transform: rotate(180deg) !important; | ||
| } | ||
| /* Modal overlay - covers entire screen */ |
Contributor
There was a problem hiding this comment.
can we do it without overlay?
| function replaceSelectWithCustomDropdown() { | ||
| const selectElements = document.querySelectorAll('select.mynah-form-input'); | ||
| console.log('[JB Modal Dropdown] Found', selectElements.length, 'select elements'); |
Contributor
There was a problem hiding this comment.
is it still only this dropdown?
| trigger.className = 'jb-custom-select-trigger'; | ||
| const selectedText = document.createElement('span'); | ||
| selectedText.textContent = select.options[select.selectedIndex]?.text || 'Select model'; |
Contributor
There was a problem hiding this comment.
This text should not be customized for a single dropdown
6 tasks
Contributor
Author
|
Closing in favor of #6136. Replaced the modal overlay approach with direct fixed positioning - simpler code and better performance. The new PR also addresses the review feedback about the hardcoded "Select model" fallback text, while also reducing the overall size of the dropdown. The new PR also addresses the issue where the arrow on the right of the models was being cut off. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Types of changes
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 withoutz-index conflicts.
Key features:
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
customer-facing in the IDE. (Will add)
License
I confirm that my contribution is made under the terms of the Apache 2.0 license.
CHANGELOG entry to add:
Fixed