fix(forms): increase-click-area-for-expandable-form-section EE-3314 (#7007)

* fix(forms): increase click area for form section

app/portainer/components/form-components/FormSection/FormSection.tsx

@@ -16,9 +16,10 @@ export function FormSection({
 
   return (
     <>
-      <FormSectionTitle>
+      <FormSectionTitle htmlFor={isFoldable ? `foldingButton${title}` : ''}>
         {isFoldable && (
           <button
+            id={`foldingButton${title}`}
             type="button"
             onClick={() => setIsExpanded(!isExpanded)}
             className="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2"

app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx

@@ -1,5 +1,22 @@
 import { PropsWithChildren } from 'react';
 
-export function FormSectionTitle({ children }: PropsWithChildren<unknown>) {
+interface Props {
+  htmlFor?: string;
+}
+
+export function FormSectionTitle({
+  children,
+  htmlFor,
+}: PropsWithChildren<Props>) {
+  if (htmlFor) {
+    return (
+      <label
+        htmlFor={htmlFor}
+        className="col-sm-12 form-section-title cursor-pointer"
+      >
+        {children}
+      </label>
+    );
+  }
   return <div className="col-sm-12 form-section-title">{children}</div>;
 }