Improve webhooks UI

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

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