<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=559034) </details> <!--IssueSummary end--> ### Problem The current webhook custom headers UI has several usability issues that create a poor user experience: 1. **Misleading visual feedback**: When validation fails, invalid headers appear greyed out as if saved, even though they weren't persisted 2. **Poor error display**: Validation errors don't persist next to problematic fields, making it unclear which header caused the issue 3. **Inconsistent validation behavior**: Different interaction methods (Enter vs Save button) provide different feedback experiences 4. **Data loss on errors**: Users may need to refill entire forms instead of just correcting typos ### Proposed Solution * Display persistent error messages next to each invalid header field * Provide clear visual indication of which headers are valid vs invalid * Allow users to correct individual field errors without losing other valid data * Ensure consistent validation feedback across all interaction methods