New Style for Backup Codes

[masteradhoc]

What?

Improve the Recovery Codes UI to a more wp.org style by:

• displaying generated codes in a two-column highlighted block,
• adding a Copy Codes action (comma-separated values),

Why?

The previous recovery code display was harder to scan and used quite some space.
This change improves readability and usability, and adds a faster way to copy codes for secure storage while preserving current functionality.

How?

• Updated the generated recovery code list rendering to use a two-column layout with tuned column gap/width.
• Added a dedicated container style for the code block.
• Added a Copy Codes control and clipboard logic to copy the latest generated codes as a comma-separated string.

Testing Instructions

1. Go to a user profile with Two-Factor enabled and open the Recovery Codes section.
2. Click Generate new recovery codes.
3. Confirm:
   • the code block appears in two columns,
   • visual spacing/background are applied correctly,
4. Click Copy Codes and paste into a text editor.
   • Verify output is comma-separated codes (e.g. 12345678,87654321,...).
5. Click Download Codes and verify the downloaded file still contains all generated codes.
6. Confirm the remaining codes counter updates after generation.

Screenshots or screencast

Old Style:

New Style:

Changelog Entry

Added - Copy Codes action (comma-separated) for backup codes
Changed - Improved Recovery Codes admin UI with two-column display and spacing refinements

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: masteradhoc <masteradhoc@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: georgestephanis <georgestephanis@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[jeffpaul]

Looks good to me, will defer to @kasparsd on technical implementation to then approve/merge

[georgestephanis]

Looks reasonable, but it seems the codes aren't rendering with a monospace font? May be worth setting, but that's trivial.

[masteradhoc]

@jeffpaul thanks for your review!
@georgestephanis good point, i've added the monospace font-family to make it stand out even a bit more, see

Does that work for you guys?