#15215: fix(UI): Prevent config layout panel from overlapping description text
app: web-ui
size: XS
Cluster:
UI Overlap Fixes
#### Summary
This PR resolves issue #14957 by addressing the overlap of the Web UI Config layout panel with the config description text. The issue was identified as an unnecessary negative margin applied to the layout panel, which obscured the text. This fix ensures the description text is clearly visible and the UI layout is correct.
#### Screenshots or Video
<img width="1908" height="957" alt="image" src="https://github.com/user-attachments/assets/cf5af883-b3d9-4aa5-8da7-c91862f8ccd8" />
#### Accessibility Impact
This change improves the readability of the configuration description text.
#### Tests
- pnpm lint
- pnpm check
- pnpm ui:build
- pnpm build
- pnpm test
#### Manual Testing
1. Start openclaw.
2. Open openclaw control UI and navigate to Settings -> Config from the sidebar.
3. Verify that the config layout panel and description text are properly aligned and do not overlap.
### Prerequisites
None
### Steps
1.Remove the negative margin (margin-top: -16px;) from the config layout panel's CSS to correct its positioning.
- Models used: Human 😎
- Submitter effort: Low
- Agent notes: NA
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR removes a negative margin from the `.config-layout` container (`ui/src/styles/config.css`) so the Config page grid no longer shifts upward/left/right into the parent `.content` padding. In the current app shell, Config renders under `<main class="content">` which applies padding (`ui/src/styles/layout.css:421-432`); the negative margin was effectively canceling that padding and could overlap the description/header area.
Net effect: restores normal spacing within the content area, preventing the config layout panel from visually overlapping the section description text.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk.
- The change is a single CSS removal limited to `.config-layout` and aligns with the surrounding layout system (`.content` padding). No functional logic changes or cross-cutting styling changes were introduced, and the fix directly addresses the reported overlap.
- No files require special attention
<sub>Last reviewed commit: 5ea32ac</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
86.7%
#11663: fix: prevent config page header overlap with settings form
by shogunsea · 2026-02-08
86.4%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
77.6%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
77.2%
#9628: fix: resolve tsconfig rootDir errors by separating UI config (AI-as...
by KGBos · 2026-02-05
77.1%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
76.7%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
76.0%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
75.8%
#7316: fix: /chat dashboard performance
by felipcsousa · 2026-02-02
74.7%
#22936: fix(ui): constrain field select width and enable dropdown arrow to ...
by jkugs · 2026-02-21
74.3%