UI housekeeping: Update Modal.children from JSX.Element to React.ReactNode, remove empty fragment wrappers (#41394)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Simplified modal structures across multiple dialog components for
improved code maintainability.
* Enhanced modal component's flexibility to support broader content
types.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

frontend/pages/admin/components/HostStatusWebhookPreviewModal/HostStatusWebhookPreviewModal.tsx

@@ -42,23 +42,21 @@ const HostStatusWebhookPreviewModal = ({
       onEnter={toggleModal}
       className={baseClass}
     >
-      <>
-        <p>
-          An example request sent to your configured <b>Destination URL</b>.
-        </p>
-        <div className={baseClass}>
-          <pre
-            dangerouslySetInnerHTML={{
-              __html: syntaxHighlight(getHostStatusPreview(isTeamScope)),
-            }}
-          />
-        </div>
-        <div className="modal-cta-wrap">
-          <Button type="button" onClick={toggleModal}>
-            Done
-          </Button>
-        </div>
-      </>
+      <p>
+        An example request sent to your configured <b>Destination URL</b>.
+      </p>
+      <div className={baseClass}>
+        <pre
+          dangerouslySetInnerHTML={{
+            __html: syntaxHighlight(getHostStatusPreview(isTeamScope)),
+          }}
+        />
+      </div>
+      <div className="modal-cta-wrap">
+        <Button type="button" onClick={toggleModal}>
+          Done
+        </Button>
+      </div>
     </Modal>
   );
 };