From 98401ccda151d60230911e6b8852b78306c3db5f Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Thu, 20 Nov 2025 15:22:48 -0500
Subject: [PATCH] PM-28506 - TwoFactorSetupYubikey - refactor yubikey form to
 be rows with 1 field per row to allow remove button to be visible again.
 (#17519)

---
 .../two-factor-setup-yubikey.component.html   | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
index 172646f5d4d..8baf304969f 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
@@ -25,23 +25,21 @@
         <li>{{ "twoFactorYubikeySaveForm" | i18n }}</li>
       </ol>
       <hr />
-      <div class="tw-grid tw-grid-cols-12 tw-gap-4" formArrayName="formKeys">
-        <div class="tw-col-span-6" *ngFor="let k of keys; let i = index">
-          <div [formGroupName]="i">
-            <bit-label>{{ "yubikeyX" | i18n: (i + 1).toString() }}</bit-label>
-            <bit-form-field *ngIf="!keys[i].existingKey">
-              <input bitInput type="password" formControlName="key" appInputVerbatim />
-            </bit-form-field>
-            <div class="tw-flex tw-justify-between tw-mb-6" *ngIf="keys[i].existingKey">
-              <span class="tw-mr-2 tw-self-center">{{ keys[i].existingKey }}</span>
-              <button
-                bitIconButton="bwi-minus-circle"
-                type="button"
-                buttonType="danger"
-                (click)="remove(i)"
-                label="{{ 'remove' | i18n }}"
-              ></button>
-            </div>
+      <div class="tw-flex tw-flex-col tw-mt-4" formArrayName="formKeys">
+        <div *ngFor="let k of keys; let i = index" [formGroupName]="i">
+          <bit-label>{{ "yubikeyX" | i18n: (i + 1).toString() }}</bit-label>
+          <bit-form-field *ngIf="!keys[i].existingKey">
+            <input bitInput type="password" formControlName="key" appInputVerbatim />
+          </bit-form-field>
+          <div class="tw-flex tw-justify-between tw-mb-4" *ngIf="keys[i].existingKey">
+            <span class="tw-mr-2 tw-self-center">{{ keys[i].existingKey }}</span>
+            <button
+              bitIconButton="bwi-minus-circle"
+              type="button"
+              buttonType="danger"
+              (click)="remove(i)"
+              label="{{ 'remove' | i18n }}"
+            ></button>
           </div>
         </div>
       </div>