fix dom errors in triggers edit panel

[arikorn]

• Forms are not allowed to be nested
• <div> can't be nested inside <p> or somesuch
• Also removes excessive vertical spacing between the Name input and Events.

The DOM errors show up in the browser console with yarn dev:webui. I see the nested <form>s and extra spacing in the 4.2.2 release, so am guessing that webpack doesn't clean it up, though the console doesn't report the DOM errors, perhaps because it's in production mode?

Summary by CodeRabbit

• Style
  • Streamlined the trigger configuration editing panel interface by reorganizing and simplifying the layout structure. Removed unnecessary wrapper elements to enhance visual clarity, improve presentation, and create a cleaner, more polished appearance with an optimized user experience for configuring triggers.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The EditPanel.tsx file has been refactored to simplify the JSX structure for TriggerConfig rendering. An intermediate CForm wrapper and paragraph element were removed, consolidating the layout into a single form with improved markup organization.

Changes

Cohort / File(s)	Summary
EditPanel Layout Refactoring webui/src/Triggers/EditPanel.tsx	Simplified nested JSX structure by removing intermediate <CForm> wrapper and <p> element. TriggerConfig now renders within a single <CForm> with className="row flex-form" containing <CCol xs={12}>. A <br /> replaces the paragraph wrapper while preserving TextInputField and TestActionsButton components.

Poem

✨ Layers unwrapped, nesting simplified clean,
Forms now flow where paragraphs had been,
Cleaner markup, easier to read,
Your refactoring is just what we need! 🎉

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing DOM errors in the triggers edit panel by removing nested form elements and invalid nesting.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}