From 8a94fa01156caccb90300f240b2e9dc04a9a5c02 Mon Sep 17 00:00:00 2001
From: Brian <brian@brianhaas.li>
Date: Sun, 22 Feb 2026 20:58:36 +0100
Subject: [PATCH 1/4] add new style for codes

---
 user-edit.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/user-edit.css b/user-edit.css
index badb1eea..6088a9b1 100644
--- a/user-edit.css
+++ b/user-edit.css
@@ -17,3 +17,23 @@
 	padding: 0.1rem 0.25rem;
 	margin: 0 0.15rem;
 }
+
+.two-factor-backup-codes-wrapper > :not(:last-child) {
+	margin-bottom: 1em;
+}
+
+.two-factor-backup-codes-list-wrap {
+	background-color: #ddd;
+	display: inline-block;
+	margin-top: 24px;
+	padding: 20px;
+}
+
+.two-factor-backup-codes-list-wrap .two-factor-backup-codes-unused-codes {
+	margin: 0;
+	padding: revert;
+}
+
+.two-factor-backup-codes-list-wrap .two-factor-backup-codes-token {
+	letter-spacing: .3em;
+}

From c5c8e57dd49e41f5a507845f5817e2b9df873ea5 Mon Sep 17 00:00:00 2001
From: Brian <brian@brianhaas.li>
Date: Sun, 22 Feb 2026 21:01:49 +0100
Subject: [PATCH 2/4] two column layout for codes

---
 providers/class-two-factor-backup-codes.php | 32 ++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/providers/class-two-factor-backup-codes.php b/providers/class-two-factor-backup-codes.php
index ee6ec2e6..0cb105b7 100644
--- a/providers/class-two-factor-backup-codes.php
+++ b/providers/class-two-factor-backup-codes.php
@@ -180,14 +180,36 @@ public function user_options( $user ) {
 			</p>
 		</p>
 		<div class="two-factor-backup-codes-wrapper" style="display:none;">
-			<ol class="two-factor-backup-codes-unused-codes"></ol>
+			<div class="two-factor-backup-codes-list-wrap">
+				<ol class="two-factor-backup-codes-unused-codes"></ol>
+			</div>
 			<p class="description"><?php esc_html_e( 'Write these down! Once you navigate away from this page, you will not be able to view these codes again.', 'two-factor' ); ?></p>
 			<p>
+				<a class="button button-two-factor-backup-codes-copy button-secondary hide-if-no-js" href="javascript:void(0);" id="two-factor-backup-codes-copy-link"><?php esc_html_e( 'Copy Codes', 'two-factor' ); ?></a>
 				<a class="button button-two-factor-backup-codes-download button-secondary hide-if-no-js" href="javascript:void(0);" id="two-factor-backup-codes-download-link" download="two-factor-backup-codes.txt"><?php esc_html_e( 'Download Codes', 'two-factor' ); ?></a>
-			<p>
+			</p>
 		</div>
 		<script type="text/javascript">
 			( function( $ ) {
+				$( '.button-two-factor-backup-codes-copy' ).click( function() {
+					var csvCodes = $( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv' );
+
+					if ( ! csvCodes ) {
+						return;
+					}
+
+					if ( navigator.clipboard && navigator.clipboard.writeText ) {
+						navigator.clipboard.writeText( csvCodes );
+						return;
+					}
+
+					var $temp = $( '<textarea>' ).val( csvCodes ).css( { position: 'absolute', left: '-9999px' } );
+					$( 'body' ).append( $temp );
+					$temp[0].select();
+					document.execCommand( 'copy' );
+					$temp.remove();
+				} );
+
 				$( '.button-two-factor-backup-codes-generate' ).click( function() {
 					wp.apiRequest( {
 						method: 'POST',
@@ -200,10 +222,12 @@ public function user_options( $user ) {
 
 						$( '.two-factor-backup-codes-wrapper' ).show();
 						$codesList.html( '' );
+						$codesList.css( { 'column-count': 2, 'column-gap': '80px', 'max-width': '420px' } );
+						$( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv', response.codes.join( ',' ) );
 
 						// Append the codes.
-						for ( i = 0; i < response.codes.length; i++ ) {
-							$codesList.append( '<li>' + response.codes[ i ] + '</li>' );
+						for ( var i = 0; i < response.codes.length; i++ ) {
+							$codesList.append( '<li class="two-factor-backup-codes-token">' + response.codes[ i ] + '</li>' );
 						}
 
 						// Update counter.

From 84569574ac0e97367eaf12e637884a5c10f30fe2 Mon Sep 17 00:00:00 2001
From: Brian <brian@brianhaas.li>
Date: Sun, 22 Feb 2026 21:08:24 +0100
Subject: [PATCH 3/4] fix lint

---
 user-edit.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/user-edit.css b/user-edit.css
index 6088a9b1..cc168ca6 100644
--- a/user-edit.css
+++ b/user-edit.css
@@ -35,5 +35,5 @@
 }
 
 .two-factor-backup-codes-list-wrap .two-factor-backup-codes-token {
-	letter-spacing: .3em;
+	letter-spacing: 0.3em;
 }

From fe44a83e2f38172559c0e41e8052222ea4358d32 Mon Sep 17 00:00:00 2001
From: Brian <brian@brianhaas.li>
Date: Tue, 24 Feb 2026 18:20:54 +0100
Subject: [PATCH 4/4] add monospace font family

---
 user-edit.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/user-edit.css b/user-edit.css
index cc168ca6..3af4acbb 100644
--- a/user-edit.css
+++ b/user-edit.css
@@ -36,4 +36,5 @@
 
 .two-factor-backup-codes-list-wrap .two-factor-backup-codes-token {
 	letter-spacing: 0.3em;
+	font-family: monospace;
 }