From 07f908858485eb2bd22b40d866b253157c0a1b87 Mon Sep 17 00:00:00 2001
From: Kuba <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:00:45 +0200
Subject: [PATCH 1/4] change input on verify with security key

---
 .../ConfigureVerifyFido2Step.tsx              | 73 +++++++++----------
 .../ConfigureVerifyFido2Step/style.scss       | 36 +++++++++
 .../full/ConfigureMfaPage/verify/style.scss   | 11 ---
 3 files changed, 70 insertions(+), 50 deletions(-)
 create mode 100644 new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss

diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
index d7f213e3..21a8731b 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
@@ -1,9 +1,10 @@
+import './style.scss';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useState } from 'react';
 import { Button } from '../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../shared/components/Button/types';
 import { Controls } from '../../../../../shared/components/Controls/Controls';
-import { FullPageTitle } from '../../../../../shared/components/FullPageTitle/FullPageTitle';
+import { Icon, IconKind } from '../../../../../shared/components/Icon';
 import { Input } from '../../../../../shared/components/Input/Input';
 import { Fido2TouchPrompt } from '../../../../../shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
@@ -11,7 +12,6 @@ import { fido2CollectsPinInApp } from '../../../../../shared/rust-api/fido2';
 import { isPresent } from '../../../../../shared/utils/isPresent';
 import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useConfigureVerifyFido2 } from './useConfigureVerifyFido2';
-import '../style.scss';
 
 interface Props {
   onCancel: () => void;
@@ -45,46 +45,41 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
   };
 
   return (
-    <FullPage
-      id="configure-verify-fido2-step"
-      className="configure-mfa-verify-page"
-      hideScrollContainer
-      withControls
-    >
-      <FullPageTitle title="Verify with your security key" />
-      {isAwaitingTouch && <Fido2TouchPrompt />}
-      {!isAwaitingTouch && (
-        <>
-          <p className="description">
-            <span>
+    <FullPage id="configure-verify-fido2-step" hideScrollContainer withControls>
+      <div className="content">
+        {isAwaitingTouch && <Fido2TouchPrompt />}
+        {!isAwaitingTouch && (
+          <>
+            <Icon icon={IconKind.SoftwareKey} size={28} />
+            <p className="title">Verify with your security key</p>
+            <p className="description">
               {collectsPin
-                ? 'Insert your security key and enter its PIN to continue.'
+                ? 'Insert your key and enter its PIN to continue.'
                 : 'Insert your security key and continue in the prompt your system shows.'}
-            </span>
-          </p>
-          {collectsPin && (
-            <div
-              className="pin-track"
-              onKeyDown={(e) => {
-                if (e.key === Enter) handleVerify();
-              }}
-            >
-              <Input
-                type="password"
-                label="PIN"
-                autoFocus
-                value={pin}
-                onChange={(value) => {
-                  setPin(isPresent(value) ? String(value) : null);
-                  setError(null);
+            </p>
+            {collectsPin && (
+              <div
+                className="pin-track"
+                onKeyDown={(e) => {
+                  if (e.key === Enter) handleVerify();
                 }}
-                error={error}
-              />
-            </div>
-          )}
-          {!collectsPin && isPresent(error) && <p className="error">{error}</p>}
-        </>
-      )}
+              >
+                <Input
+                  type="password"
+                  autoFocus
+                  value={pin}
+                  onChange={(value) => {
+                    setPin(isPresent(value) ? String(value) : null);
+                    setError(null);
+                  }}
+                  error={error}
+                />
+              </div>
+            )}
+            {!collectsPin && isPresent(error) && <p className="error">{error}</p>}
+          </>
+        )}
+      </div>
       <Controls>
         <Button
           text={leaveText}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
new file mode 100644
index 00000000..d8d6d090
--- /dev/null
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
@@ -0,0 +1,36 @@
+#configure-verify-fido2-step {
+  padding: var(--spacing-md) var(--spacing-lg);
+
+  & > .content {
+    --icon-color: var(--fg-white-50);
+
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    & > .title {
+      padding-top: var(--spacing-2xl);
+      color: var(--fg-white-100);
+      font: var(--t-h4);
+    }
+
+    & > .description {
+      padding: var(--spacing-sm) 0 var(--spacing-2xl);
+      color: var(--fg-white-70);
+      font: var(--t-body-sm-400);
+    }
+
+    & > .pin-track {
+      width: 321px;
+      text-align: left;
+    }
+
+    & > .error {
+      font: var(--t-body-sm-400);
+      color: var(--fg-critical);
+    }
+  }
+}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
index dfc017fe..80196b95 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/style.scss
@@ -21,15 +21,4 @@
     font: var(--t-body-sm-400);
     color: var(--fg-critical);
   }
-
-  & > .pin-track {
-    padding-bottom: var(--spacing-3xl);
-    box-sizing: border-box;
-  }
-
-  & > .fido2-touch-prompt {
-    width: 100%;
-    padding-top: var(--spacing-xl);
-    box-sizing: border-box;
-  }
 }

From 42b6625110e3c57a67ff87199d6d37f65a339252 Mon Sep 17 00:00:00 2001
From: Kuba <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:11:47 +0200
Subject: [PATCH 2/4] adjust component to use custom input when verifying with
 security key

---
 .../MfaCodeVerification.tsx                   | 31 ++----
 .../ConfigureVerifyEmailStep.tsx              | 16 ++-
 .../ConfigureVerifyFido2Step.tsx              | 97 ++++++++-----------
 .../ConfigureVerifyFido2Step/style.scss       | 41 ++------
 .../ConfigureVerifyTotpStep.tsx               | 16 ++-
 5 files changed, 79 insertions(+), 122 deletions(-)

diff --git a/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx
index 62da8463..ca60984d 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/components/MfaCodeVerification/MfaCodeVerification.tsx
@@ -1,28 +1,22 @@
 import './style.scss';
-import type { ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { Button } from '../../../../../shared/components/Button/Button';
 import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { Controls } from '../../../../../shared/components/Controls/Controls';
 import { Icon, type IconKindValue } from '../../../../../shared/components/Icon';
 import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { isPresent } from '../../../../../shared/utils/isPresent';
 
-const codeLength = 6;
-
-interface Props {
+interface Props extends PropsWithChildren {
   id: string;
   icon: IconKindValue;
   title: string;
   description: string[];
-  code: string | null;
-  error: string | null;
-  onCodeChange: (value: string) => void;
-  onSubmit: (pastedCode?: string) => void;
+  onSubmit: () => void;
+  submitText?: string;
   leaveText: string;
   onLeave: () => void;
   extraAction?: ReactNode;
-  codeLoading?: boolean;
   isLeaving?: boolean;
   leaveDisabled?: boolean;
   submitLoading?: boolean;
@@ -34,14 +28,12 @@ export const MfaCodeVerification = ({
   icon,
   title,
   description,
-  code,
-  error,
-  onCodeChange,
+  children,
   onSubmit,
+  submitText = 'Continue',
   leaveText,
   onLeave,
   extraAction,
-  codeLoading = false,
   isLeaving = false,
   leaveDisabled = false,
   submitLoading = false,
@@ -57,14 +49,7 @@ export const MfaCodeVerification = ({
             <span key={line}>{line}</span>
           ))}
         </p>
-        <CodeInput
-          length={codeLength}
-          value={code}
-          onChange={onCodeChange}
-          error={error}
-          onSubmit={onSubmit}
-          loading={codeLoading}
-        />
+        {children}
       </div>
       <Controls>
         <Button
@@ -77,7 +62,7 @@ export const MfaCodeVerification = ({
         <div className="right">
           {isPresent(extraAction) && extraAction}
           <Button
-            text="Continue"
+            text={submitText}
             variant={ButtonVariant.Primary}
             loading={submitLoading}
             disabled={submitDisabled}
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
index 96b33e2a..73967a9c 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyEmailStep/ConfigureVerifyEmailStep.tsx
@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { IconKind } from '../../../../../shared/components/Icon';
 import { ResendEmailButton } from '../../../../../shared/components/ResendEmailButton/ResendEmailButton';
 import { useResendCooldown } from '../../../../../shared/hooks/useResendCooldown';
@@ -114,11 +115,7 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
         `We've sent a verification code to your email address.`,
         `Enter the 6-digit code to continue setting up MFA.`,
       ]}
-      code={code}
-      error={error}
-      onCodeChange={handleCodeChange}
       onSubmit={handleSubmit}
-      codeLoading={isBusy}
       leaveText={leaveText}
       onLeave={leave}
       isLeaving={isLeaving}
@@ -133,6 +130,15 @@ export const ConfigureVerifyEmailStep = ({ onCancel, onSessionExpired }: Props)
           onClick={handleResend}
         />
       }
-    />
+    >
+      <CodeInput
+        length={CODE_LENGTH}
+        value={code}
+        onChange={handleCodeChange}
+        error={error}
+        onSubmit={handleSubmit}
+        loading={isBusy}
+      />
+    </MfaCodeVerification>
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
index 21a8731b..dcb87927 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
@@ -1,15 +1,12 @@
 import './style.scss';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useState } from 'react';
-import { Button } from '../../../../../shared/components/Button/Button';
-import { ButtonVariant } from '../../../../../shared/components/Button/types';
-import { Controls } from '../../../../../shared/components/Controls/Controls';
-import { Icon, IconKind } from '../../../../../shared/components/Icon';
+import { IconKind } from '../../../../../shared/components/Icon';
 import { Input } from '../../../../../shared/components/Input/Input';
 import { Fido2TouchPrompt } from '../../../../../shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt';
-import { FullPage } from '../../../../../shared/layouts/FullPage/FullPage';
 import { fido2CollectsPinInApp } from '../../../../../shared/rust-api/fido2';
 import { isPresent } from '../../../../../shared/utils/isPresent';
+import { MfaCodeVerification } from '../../components/MfaCodeVerification/MfaCodeVerification';
 import { useLeaveVerification } from '../../hooks/useLeaveVerification';
 import { useConfigureVerifyFido2 } from './useConfigureVerifyFido2';
 
@@ -45,59 +42,47 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
   };
 
   return (
-    <FullPage id="configure-verify-fido2-step" hideScrollContainer withControls>
-      <div className="content">
-        {isAwaitingTouch && <Fido2TouchPrompt />}
-        {!isAwaitingTouch && (
-          <>
-            <Icon icon={IconKind.SoftwareKey} size={28} />
-            <p className="title">Verify with your security key</p>
-            <p className="description">
-              {collectsPin
-                ? 'Insert your key and enter its PIN to continue.'
-                : 'Insert your security key and continue in the prompt your system shows.'}
-            </p>
-            {collectsPin && (
-              <div
-                className="pin-track"
-                onKeyDown={(e) => {
-                  if (e.key === Enter) handleVerify();
-                }}
-              >
-                <Input
-                  type="password"
-                  autoFocus
-                  value={pin}
-                  onChange={(value) => {
-                    setPin(isPresent(value) ? String(value) : null);
-                    setError(null);
-                  }}
-                  error={error}
-                />
-              </div>
-            )}
-            {!collectsPin && isPresent(error) && <p className="error">{error}</p>}
-          </>
-        )}
-      </div>
-      <Controls>
-        <Button
-          text={leaveText}
-          variant={ButtonVariant.Secondary}
-          loading={isLeaving}
-          onClick={() => {
-            void handleLeave();
+    <MfaCodeVerification
+      id="configure-verify-fido2-step"
+      icon={IconKind.SoftwareKey}
+      title="Verify with your security key"
+      description={[
+        collectsPin
+          ? 'Insert your key and enter its PIN to continue.'
+          : 'Insert your security key and continue in the prompt your system shows.',
+      ]}
+      onSubmit={handleVerify}
+      submitText="Verify"
+      leaveText={leaveText}
+      onLeave={() => {
+        void handleLeave();
+      }}
+      isLeaving={isLeaving}
+      submitLoading={isVerifying}
+    >
+      {isAwaitingTouch && <Fido2TouchPrompt />}
+      {!isAwaitingTouch && collectsPin && (
+        <div
+          className="pin-track"
+          onKeyDown={(e) => {
+            if (e.key === Enter) handleVerify();
           }}
-        />
-        <div className="right">
-          <Button
-            text="Verify"
-            variant={ButtonVariant.Primary}
-            loading={isVerifying}
-            onClick={handleVerify}
+        >
+          <Input
+            type="password"
+            autoFocus
+            value={pin}
+            onChange={(value) => {
+              setPin(isPresent(value) ? String(value) : null);
+              setError(null);
+            }}
+            error={error}
           />
         </div>
-      </Controls>
-    </FullPage>
+      )}
+      {!isAwaitingTouch && !collectsPin && isPresent(error) && (
+        <p className="error">{error}</p>
+      )}
+    </MfaCodeVerification>
   );
 };
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
index d8d6d090..28b4b945 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
@@ -1,36 +1,11 @@
-#configure-verify-fido2-step {
-  padding: var(--spacing-md) var(--spacing-lg);
-
-  & > .content {
-    --icon-color: var(--fg-white-50);
-
-    display: flex;
-    flex: 1;
-    flex-flow: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    & > .title {
-      padding-top: var(--spacing-2xl);
-      color: var(--fg-white-100);
-      font: var(--t-h4);
-    }
-
-    & > .description {
-      padding: var(--spacing-sm) 0 var(--spacing-2xl);
-      color: var(--fg-white-70);
-      font: var(--t-body-sm-400);
-    }
-
-    & > .pin-track {
-      width: 321px;
-      text-align: left;
-    }
+#configure-verify-fido2-step > .content {
+  & > .pin-track {
+    width: 321px;
+    text-align: left;
+  }
 
-    & > .error {
-      font: var(--t-body-sm-400);
-      color: var(--fg-critical);
-    }
+  & > .error {
+    font: var(--t-body-sm-400);
+    color: var(--fg-critical);
   }
 }
diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
index 5ed94c40..1044ebc0 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyTotpStep/ConfigureVerifyTotpStep.tsx
@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { useCallback, useState } from 'react';
+import { CodeInput } from '../../../../../shared/components/CodeInput/CodeInput';
 import { IconKind } from '../../../../../shared/components/Icon';
 import { api } from '../../../../../shared/rust-api/api';
 import { MfaMethod } from '../../../../../shared/rust-api/types';
@@ -68,17 +69,22 @@ export const ConfigureVerifyTotpStep = ({ onCancel, onSessionExpired }: Props) =
       icon={IconKind.MobileLock}
       title="Security code from your authenticator app."
       description={[`Enter the 6-digit code from your Authenticator app to continue.`]}
-      code={code}
-      error={error}
-      onCodeChange={handleCodeChange}
       onSubmit={handleSubmit}
-      codeLoading={isSubmitting}
       leaveText={leaveText}
       onLeave={leave}
       isLeaving={isLeaving}
       leaveDisabled={isSubmitting}
       submitLoading={isSubmitting}
       submitDisabled={isLeaving}
-    />
+    >
+      <CodeInput
+        length={CODE_LENGTH}
+        value={code}
+        onChange={handleCodeChange}
+        error={error}
+        onSubmit={handleSubmit}
+        loading={isSubmitting}
+      />
+    </MfaCodeVerification>
   );
 };

From 4678a7f58ec5bf7869c2643afefe4f83068f640b Mon Sep 17 00:00:00 2001
From: Kuba <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:15:27 +0200
Subject: [PATCH 3/4] adjust text after verifying

---
 .../ConfigureVerifyFido2Step.tsx                    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
index dcb87927..e3597e61 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/ConfigureVerifyFido2Step.tsx
@@ -3,7 +3,6 @@ import { Enter } from '@fluentui/keyboard-keys';
 import { useState } from 'react';
 import { IconKind } from '../../../../../shared/components/Icon';
 import { Input } from '../../../../../shared/components/Input/Input';
-import { Fido2TouchPrompt } from '../../../../../shared/components/LocationCard/components/Fido2TouchPrompt/Fido2TouchPrompt';
 import { fido2CollectsPinInApp } from '../../../../../shared/rust-api/fido2';
 import { isPresent } from '../../../../../shared/utils/isPresent';
 import { MfaCodeVerification } from '../../components/MfaCodeVerification/MfaCodeVerification';
@@ -41,16 +40,17 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
     leave();
   };
 
+  let description = collectsPin
+    ? 'Insert your key and enter its PIN to continue.'
+    : 'Insert your security key and continue in the prompt your system shows.';
+  if (isAwaitingTouch) description = 'The key is blinking. Tap it to confirm.';
+
   return (
     <MfaCodeVerification
       id="configure-verify-fido2-step"
       icon={IconKind.SoftwareKey}
       title="Verify with your security key"
-      description={[
-        collectsPin
-          ? 'Insert your key and enter its PIN to continue.'
-          : 'Insert your security key and continue in the prompt your system shows.',
-      ]}
+      description={[description]}
       onSubmit={handleVerify}
       submitText="Verify"
       leaveText={leaveText}
@@ -60,7 +60,6 @@ export const ConfigureVerifyFido2Step = ({ onCancel, onSessionExpired }: Props)
       isLeaving={isLeaving}
       submitLoading={isVerifying}
     >
-      {isAwaitingTouch && <Fido2TouchPrompt />}
       {!isAwaitingTouch && collectsPin && (
         <div
           className="pin-track"

From 94a9103dfcb8c7a83414eea3689acdc5747cfd53 Mon Sep 17 00:00:00 2001
From: Kuba <78603704+jakub-tldr@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:25:44 +0200
Subject: [PATCH 4/4] remove static width

---
 .../verify/ConfigureVerifyFido2Step/style.scss                 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
index 28b4b945..84a60a39 100644
--- a/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
+++ b/new-ui/src/pages/full/ConfigureMfaPage/verify/ConfigureVerifyFido2Step/style.scss
@@ -1,6 +1,7 @@
 #configure-verify-fido2-step > .content {
   & > .pin-track {
-    width: 321px;
+    width: 100%;
+    max-width: 321px;
     text-align: left;
   }