#22936: fix(ui): constrain field select width and enable dropdown arrow to display
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
#20064: UI: fix form overlapping subtitle in config screen
by powerdot · 2026-02-18
77.0%
#15215: fix(UI): Prevent config layout panel from overlapping description text
by Chityalaakhil · 2026-02-13
74.3%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
74.1%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
73.0%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
72.0%
#11663: fix: prevent config page header overlap with settings form
by shogunsea · 2026-02-08
71.3%
#14201: UI: fix exec approval dialog scrolling with long commands
by jhs129 · 2026-02-11
70.8%
#6260: fix(tui): prevent width overflow crashes from nested ANSI escape codes
by 0xktn · 2026-02-01
70.7%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
70.6%
#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive ...
by vishaltandale00 · 2026-02-04
70.6%