From 0ba8f398f59bc15a2eda11c0131b5e3553139565 Mon Sep 17 00:00:00 2001
From: Jacek Chmielewski <jacek@defguard.net>
Date: Tue, 25 Aug 2026 05:51:31 +0200
Subject: [PATCH] fix mfa editor spacing issue

---
 .../components/MfaConfigurationStep.tsx               | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/shared/components/MfaConfiguration/components/MfaConfigurationStep.tsx b/web/src/shared/components/MfaConfiguration/components/MfaConfigurationStep.tsx
index af8c03c78..6dca274e0 100644
--- a/web/src/shared/components/MfaConfiguration/components/MfaConfigurationStep.tsx
+++ b/web/src/shared/components/MfaConfiguration/components/MfaConfigurationStep.tsx
@@ -5,6 +5,7 @@ import { Divider } from '../../../defguard-ui/components/Divider/Divider';
 import { FieldError } from '../../../defguard-ui/components/FieldError/FieldError';
 import { Helper } from '../../../defguard-ui/components/Helper/Helper';
 import { Icon } from '../../../defguard-ui/components/Icon';
+import { SizedBox } from '../../../defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing, ThemeVariable } from '../../../defguard-ui/types';
 import type { MfaConfigurationStepProps } from '../types';
 import { MfaMethodsMenu } from './MfaMethodsMenu';
@@ -27,6 +28,7 @@ export const MfaConfigurationStep = ({
       buildOption(method, () => onAddMethod(step.id, method)),
     ),
   }));
+  const error = step.methods.length === 0 ? m.mfa_flow_method_required() : undefined;
 
   return (
     <Reorder.Item
@@ -96,9 +98,12 @@ export const MfaConfigurationStep = ({
           </Helper>
         </div>
       )}
-      <FieldError
-        error={step.methods.length === 0 ? m.mfa_flow_method_required() : undefined}
-      />
+      {error && (
+        <>
+          <SizedBox height={ThemeSpacing.Lg} />
+          <FieldError error={error} />
+        </>
+      )}
     </Reorder.Item>
   );
 };