Fix recovery code pages button style

Author: carmenlau

resources/authgear/static/authgear.css

@@ -778,7 +778,7 @@ h1, h2, h3, h4, h5, h6 {
 .btn.primary-btn, .btn.light-btn {
   height: 36px;
   border-radius: 2px;
-  padding: 0 24px;
+  padding: 0 20px;
 }
 
 .btn.action-btn {
@@ -1215,8 +1215,8 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0 20px 0 30px;
 }
 
-.recovery-code-action-section .action {
-  flex: 0 0 50%;
+.recovery-code-action-section {
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
 
 .recovery-codes-container {

resources/authgear/templates/en/web/settings_recovery_code.html

@@ -23,24 +23,26 @@ <h1 class="primary-txt text-center margin-t-0 margin-b-10 text-xl font-bold">
 			<p class="text-sm primary-txt text-center margin-t-0 margin-b-20">{{ template "recovery-code-consumption-description" }}</p>
 		</section>
 
-		<section class="margin-b-20 flex flex-row recovery-code-action-section">
-			<form method="post" class="action margin-h-4" novalidate>
+		<section class="margin-b-20 grid gap-8 recovery-code-action-section">
+			<form method="post" novalidate>
 				{{ $.CSRFField }}
 				<button class="btn primary-btn w-full" type="submit" name="x_action" value="regenerate">
 					{{ template "get-new-code-button-label" }}
 				</button>
 			</form>
 			{{ if $.IsSupportedMobilePlatform }}
-				<button
-					class="btn primary-btn margin-h-4 w-full action"
-					type="button"
-					data-copy-button-target="#recovery-code-content"
-					data-copy-button-copy-label="{{ template "copy-button-label" }}"
-					data-copy-button-copied-label="{{ template "copied-button-label" }}">
-					{{ template "copy-button-label" }}
-				</button>
+				<div>
+					<button
+						class="btn primary-btn w-full"
+						type="button"
+						data-copy-button-target="#recovery-code-content"
+						data-copy-button-copy-label="{{ template "copy-button-label" }}"
+						data-copy-button-copied-label="{{ template "copied-button-label" }}">
+						{{ template "copy-button-label" }}
+					</button>
+				</div>
 			{{ else }}
-				<form method="post" class="action margin-h-4" novalidate target="_blank">
+				<form method="post" novalidate target="_blank">
 					{{ $.CSRFField }}
 					<button class="btn primary-btn w-full" type="submit" name="x_action" value="download" data-form-xhr="false">
 						{{ template "download-button-label" }}

resources/authgear/templates/en/web/setup_recovery_code.html

@@ -23,25 +23,27 @@ <h1 class="primary-txt text-center margin-t-20 margin-b-10 text-xl font-bold">
 			<p class="text-sm primary-txt text-center margin-t-0 margin-b-20">{{ template "recovery-code-consumption-description" }}</p>
 		</section>
 
-		<section class="margin-b-20 flex flex-row recovery-code-action-section">
+		<section class="margin-b-20 grid gap-8 recovery-code-action-section">
 			{{ if $.IsSupportedMobilePlatform }}
-				<button
-					class="btn primary-btn margin-h-4 w-full action"
-					type="button"
-					data-copy-button-target="#recovery-code-content"
-					data-copy-button-copy-label="{{ template "copy-button-label" }}"
-					data-copy-button-copied-label="{{ template "copied-button-label" }}">
-					{{ template "copy-button-label" }}
-				</button>
+				<div>
+					<button
+						class="btn primary-btn w-full"
+						type="button"
+						data-copy-button-target="#recovery-code-content"
+						data-copy-button-copy-label="{{ template "copy-button-label" }}"
+						data-copy-button-copied-label="{{ template "copied-button-label" }}">
+						{{ template "copy-button-label" }}
+					</button>
+				</div>
 			{{ else }}
-				<form method="post" class="action margin-h-4" novalidate target="_blank">
+				<form method="post" novalidate target="_blank">
 					{{ $.CSRFField }}
 					<button class="btn primary-btn w-full" type="submit" name="x_action" value="download" data-form-xhr="false">
 						{{ template "download-button-label" }}
 					</button>
 				</form>
 			{{ end }}
-			<form method="post" class="action margin-h-4" novalidate>
+			<form method="post" novalidate>
 				{{ $.CSRFField }}
 				<button class="btn primary-btn w-full" type="submit" name="x_action" value="proceed">
 					{{ template "next-button-label" }}