From 4a6b7e2654bcf5d8f535e456aa49a26cb7d91929 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Sun, 3 Sep 2023 10:26:38 +0100
Subject: [PATCH] fix(ui/switch): reduce label size [EE-3803] (#10019)

---
 .../form-components/SwitchField/SwitchField.tsx      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/react/components/form-components/SwitchField/SwitchField.tsx b/app/react/components/form-components/SwitchField/SwitchField.tsx
index 0bd13d008..d8f9d783d 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ComponentProps } from 'react';
+import uuid from 'uuid';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
@@ -30,7 +31,7 @@ export function SwitchField({
   checked,
   label,
   index,
-  name,
+  name = uuid(),
   labelClass,
   fieldClass,
   dataCy,
@@ -43,15 +44,16 @@ export function SwitchField({
   const toggleName = name ? `toggle_${name}` : '';
 
   return (
-    <label className={clsx(styles.root, fieldClass)}>
-      <span
+    <div className={clsx(styles.root, fieldClass)}>
+      <label
         className={clsx('space-right control-label !p-0 text-left', labelClass)}
+        htmlFor={toggleName}
       >
         {label}
         {tooltip && (
           <Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
         )}
-      </span>
+      </label>
       <Switch
         className={clsx('space-right', switchClass)}
         name={toggleName}
@@ -63,6 +65,6 @@ export function SwitchField({
         featureId={featureId}
         dataCy={dataCy}
       />
-    </label>
+    </div>
   );
 }