Fixes #4770 - Security type selector overlaps label

app/frontend/apps/mobile/form/theme/global/getCoreClasses.ts

@@ -68,7 +68,13 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
     recipient: addBlockFloatingLabel(classes.recipient),
     button: addButtonVariants(classes.button),
     submit: addButtonVariants(classes.submit),
-    security: addBlockFloatingLabel(classes.security),
+    security: extendClasses(classes.security, {
+      outer:
+        'relative px-2 formkit-invalid:bg-red-dark formkit-errors:bg-red-dark',
+      wrapper: 'inline-flex w-full h-14 px-2 items-center',
+      label:
+        'formkit-required:required text-white w-full h-14 leading-[3.5rem] truncate text-base',
+    }),
   }
 }
 

app/frontend/shared/components/Form/fields/FieldSecurity/FieldSecurity.vue

@@ -144,7 +144,7 @@ const changeSecurityState = (method: EnumSecurityStateType) => {
   <div
     :id="`${context.node.name}-${context.formId}`"
     :class="context.classes.input"
-    class="flex h-auto flex-col gap-2"
+    class="flex h-auto flex-row gap-2"
   >
     <div
       v-if="securityMethods.length > 1"