fix(ui/switch): reduce label size [EE-3803] (#10018)

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)}>
+    <div className={clsx(styles.root, fieldClass)}>
-      <span
+      <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>
   );
 }