Auth/PM-28506 - TwoFactorSetupYubikey - refactor to use rows so individual keys can be removed

[JaredSnider-Bitwarden]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-28506

📔 Objective

To allow users to remove configured 2FA yubikeys since the new font change has made the existing approach hide the delete button.

📸 Screenshots

Before:

After:

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[claude]

Claude finished @JaredSnider-Bitwarden's task —— View job

---

Code Review Complete

This PR effectively solves the display issue by changing the layout from a 2-column grid to a single-column flex layout. The solution is clean and maintains all existing functionality.

Summary

Finding 1: Bottom margin reduced from tw-mb-6 to tw-mb-4, which may affect visual consistency

The change from tw-mb-6 to tw-mb-4 (line 34) reduces spacing between YubiKey rows. While this works functionally, verify this matches the design intent, especially when multiple keys are configured.

<div class="tw-flex tw-justify-between tw-mb-6" *ngIf="keys[i].existingKey">


<div class="tw-flex tw-justify-between tw-mb-4" *ngIf="keys[i].existingKey">

Finding 2: Container structure simplified by one nesting level

The refactor removes one level of nesting within the form array loop (the intermediate <div> with [formGroupName]="i"), improving template clarity. The [formGroupName]="i" directive was moved up to the *ngFor parent, which is cleaner.

Observations

The screenshots confirm the remove buttons are now visible and properly positioned. The layout change successfully addresses PM-28506.

---

[github-actions]

Checkmarx One – Scan Summary & Details – 1b80cb88-a0c7-4f05-92ab-0e9224ec2944

Great job! No new security vulnerabilities introduced in this pull request

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 41.25%. Comparing base (9afba33) to head (d49d464).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17519      +/-   ##
==========================================
- Coverage   41.25%   41.25%   -0.01%     
==========================================
  Files        3546     3546              
  Lines      102047   102062      +15     
  Branches    15310    15314       +4     
==========================================
+ Hits        42103    42106       +3     
- Misses      58179    58192      +13     
+ Partials     1765     1764       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.