From aea62723c0bf69c3e3a32027577e5a3a19d3c8bf Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Fri, 3 Jun 2022 13:29:23 +1200
Subject: [PATCH] fix(forms): increase-click-area-for-expandable-form-section
 EE-3314 (#7007)

* fix(forms): increase click area for form section
---
 .../FormSection/FormSection.tsx               |  3 ++-
 .../FormSectionTitle/FormSectionTitle.tsx     | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/portainer/components/form-components/FormSection/FormSection.tsx b/app/portainer/components/form-components/FormSection/FormSection.tsx
index c833bcf39..e4d1ff12b 100644
--- a/app/portainer/components/form-components/FormSection/FormSection.tsx
+++ b/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"
diff --git a/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx b/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx
index 74de313b8..930d3d6e5 100644
--- a/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/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>;
 }