#20064: UI: fix form overlapping subtitle in config screen
app: web-ui
size: XS
Cluster:
UI Overlap Fixes
## Summary
- Problem: In the config UI, the form visually overlapped the subtitle.
- Why it matters: The overlap reduced readability and made the screen look broken on some viewport sizes.
- What changed: Updated layout/styles in `ui/src/styles/config.css` to ensure proper spacing and stacking so the form no longer covers the subtitle.
- What did NOT change (scope boundary): No logic, data flow, API contracts, or assistant behavior was changed.
## Change Type (select all)
- [x] Bug fix
- [ ] Feature
- [ ] Refactor
- [ ] Docs
- [ ] Security hardening
- [ ] Chore/infra
## Scope (select all touched areas)
- [ ] Gateway / orchestration
- [ ] Skills / tool execution
- [ ] Auth / tokens
- [ ] Memory / storage
- [ ] Integrations
- [ ] API / contracts
- [x] UI / DX
- [ ] CI/CD / infra
## Linked Issue/PR
- Closes #N/A
- Related #N/A
## User-visible / Behavior Changes
- Fixed visual overlap: the form no longer covers the subtitle in the config screen.
## Security Impact (required)
- 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
- If any `Yes`, explain risk + mitigation: N/A
## Repro + Verification
### Environment
- OS: macOS
- Runtime/container: local dev build
- Model/provider: N/A
- Integration/channel (if any): N/A
- Relevant config (redacted): default UI config
### Steps
1. Open the config screen before the fix.
2. Observe subtitle area where the form overlaps it.
3. Apply this change and reload the same screen.
### Expected
- Subtitle and form are separated with correct spacing; no overlap.
### Actual
- Before: form overlaps subtitle.
- After: no overlap; layout is readable.
## Evidence
- [ ] Failing test/log before + passing after
- [ ] Trace/log snippets
- [x] Screenshot/recording
- [ ] Perf numbers (if relevant)
## Human Verification (required)
- Verified scenarios: Checked config screen at common desktop widths; subtitle remains visible and unobstructed.
- Edge cases checked: Narrow viewport/responsive resize.
- What you did **not** verify: Full cross-browser matrix and mobile app surfaces.
## Compatibility / Migration
- Backward compatible? Yes
- Config/env changes? No
- Migration needed? No
- If yes, exact upgrade steps: N/A
## Failure Recovery (if this breaks)
- How to disable/revert this change quickly: Revert the CSS changes in `ui/src/styles/config.css`.
- Files/config to restore: `ui/src/styles/config.css`.
- Known bad symptoms reviewers should watch for: Subtitle/form overlap reappears, spacing collapse in config layout.
## Risks and Mitigations
- Risk: Layout regression on very small or uncommon viewport sizes.
- Mitigation: Manual responsive checks and before/after screenshot validation.

<!-- greptile_comment -->
<h3>Greptile Summary</h3>
Fixes a visual overlap bug in the config screen where the form layout covered the subtitle. The fix removes a `margin: -16px` on `.config-layout` that was pulling the container into surrounding space, and adjusts the height calculation from `calc(100vh - 160px)` to `calc(100vh - 190px)` to compensate for the layout shift. Also includes minor whitespace normalization in CSS adjacent-sibling selectors (functionally no-op).
- Removed negative margin that caused the config layout to bleed into the subtitle area
- Adjusted viewport height offset to maintain proper sizing without the negative margin
- Cosmetic whitespace changes in toggle selector rules (no behavioral impact)
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge — it contains only CSS layout fixes with no logic, API, or behavioral changes.
- Single-file CSS-only change that removes a negative margin and adjusts a height calculation. The fix is well-scoped and the risk of regression is minimal. No JavaScript, API, or data flow changes.
- No files require special attention.
<sub>Last reviewed commit: 5d75bf9</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
#15215: fix(UI): Prevent config layout panel from overlapping description text
by Chityalaakhil · 2026-02-13
86.7%
#11663: fix: prevent config page header overlap with settings form
by shogunsea · 2026-02-08
84.1%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
78.8%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
77.8%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
77.7%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
77.3%
#22936: fix(ui): constrain field select width and enable dropdown arrow to ...
by jkugs · 2026-02-21
77.0%
#14201: UI: fix exec approval dialog scrolling with long commands
by jhs129 · 2026-02-11
75.7%
#16733: fix(ui): avoid injected newlines when tool output is hidden
by jp117 · 2026-02-15
75.6%
#22458: Codex/macos chat corner clip
by apethree · 2026-02-21
75.3%