← Back to PRs

#20064: UI: fix form overlapping subtitle in config screen

by powerdot open 2026-02-18 13:31 View on GitHub →
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. ![Bug](https://github.com/user-attachments/assets/0e038dc8-c9d1-485e-8a43-1f4e15ec6977) <!-- 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