← Back to PRs

#22936: fix(ui): constrain field select width and enable dropdown arrow to display

by jkugs open 2026-02-21 20:57 View on GitHub →
app: web-ui size: XS
Cluster: UI Overlap Fixes
## Summary - **Problem:** `.field select` had no width constraint, causing the element to overflow its container sometimes. The light theme CSS rule also used the `background` shorthand, which resets `background-image` and hid the dropdown arrow SVG. - **Why it matters:** Dropdowns in the gateway overview are broken in light theme and can overflow their container. - **What changed:** Added `width: 100%` to `.field select`; changed `background` → `background-color` in the light theme override. - **What did NOT change:** No behavior, layout, or other component affected. ## Change Type - [x] Bug fix ## Scope - [x] UI / DX ## Linked Issue/PR None ## User-visible / Behavior Changes Language dropdown in the gateway overview now stays within its container and displays the dropdown arrow correctly in light theme. ## Security Impact - New permissions/capabilities? No - Secrets/tokens handling changed? No - New/changed network calls? No - Command/tool execution surface changed? No - Data access scope changed? No ## Repro + Verification ### Environment - OS: Linux (Ubuntu) - Runtime: Node v25.4.0 - Integration: webchat / gateway overview UI ### Steps 1. Open gateway overview page 2. Navigate to the language select in light theme 3. Observe dropdown arrow missing and select overflowing its container ### Expected - Arrow visible, select constrained within its box ### Actual - Arrow hidden, select overflows ## Evidence Before: <img width="2551" height="1031" alt="select-dropdown-bug" src="https://github.com/user-attachments/assets/105364da-4d2b-4ff9-8efc-0c182ec3e1fe" /> After: <img width="2551" height="1257" alt="language-dropdown-fix" src="https://github.com/user-attachments/assets/60b0af2f-645d-4076-80e3-826d8146fed3" /> ## Human Verification - Verified language dropdown renders correctly in light theme with arrow visible - Verified no other `.field select` elements affected - Not verified: all supported browsers / dark theme edge cases ## Compatibility / Migration - Backward compatible? Yes - Config/env changes? No - Migration needed? No ## Failure Recovery - How to revert: `git revert` this commit, rebuild UI - Known bad symptoms: none expected ## Risks and Mitigations None <!-- greptile_comment --> <h3>Greptile Summary</h3> Fixed `.field select` overflow and dropdown arrow visibility in light theme. Added `width: 100%` constraint to prevent select elements from overflowing their containers, and changed `background` shorthand to `background-color` in the light theme override to preserve the dropdown arrow SVG defined in `background-image`. <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with minimal risk. - The changes are minimal, well-targeted CSS fixes that address specific visual bugs without affecting behavior. The `width: 100%` addition is a standard constraint for form selects, and changing `background` to `background-color` correctly preserves the `background-image` property that defines the dropdown arrow. - No files require special attention. <sub>Last reviewed commit: 94416e7</sub> <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> <!-- /greptile_comment -->

Most Similar PRs