From b9a8837145d45981faa156f078daccaa844d769a Mon Sep 17 00:00:00 2001
From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Tue, 26 Nov 2024 17:15:07 -0500
Subject: [PATCH] Bug 1933585 - Fix TOTP form layout on Account Verification
 page

---
 skins/standard/login.css                      | 13 ++++++++----
 template/en/default/mfa/totp/verify.html.tmpl | 20 +++++++++----------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/skins/standard/login.css b/skins/standard/login.css
index 38c15a7728..ccd95a3af8 100644
--- a/skins/standard/login.css
+++ b/skins/standard/login.css
@@ -74,14 +74,19 @@ button[type="submit"] {
   font-size: var(--font-size-h3);
 }
 
-#verify-totp-form div {
-  margin-bottom: 15px;
+#verify-totp-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#verify-totp-input input[type="submit"] {
+  width: auto;
 }
 
 #verify-totp-error {
-  padding: 5px;
+  margin-top: 8px;
   color: var(--error-message-foreground-color);
-  background-color: var(--error-message-background-color);
 }
 
 @media screen and (768px <= width) {
diff --git a/template/en/default/mfa/totp/verify.html.tmpl b/template/en/default/mfa/totp/verify.html.tmpl
index 491f49c6e6..7f8feff2cd 100644
--- a/template/en/default/mfa/totp/verify.html.tmpl
+++ b/template/en/default/mfa/totp/verify.html.tmpl
@@ -22,18 +22,16 @@
 </p>
 <div class="verify-totp">
   <form id="verify-totp-form" method="POST" action="[% postback.action FILTER none %]">
-    <div>
-      <span id="verify-totp-input">
-        [% FOREACH field IN postback.fields.keys %]
-          <input type="hidden" name="[% field FILTER html %]" value="[% postback.fields.item(field) FILTER html %]">
-        [% END %]
-        <input type="text" name="code" id="code" data-token="[% token FILTER html %]"
-               placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
-               autocomplete="off" inputmode="numeric" required autofocus>
-      </span>
-      <span id="verify-totp-error" class="bz_default_hidden"></span>
+    <div id="verify-totp-input">
+      [% FOREACH field IN postback.fields.keys %]
+        <input type="hidden" name="[% field FILTER html %]" value="[% postback.fields.item(field) FILTER html %]">
+      [% END %]
+      <input type="text" name="code" id="code" data-token="[% token FILTER html %]"
+             placeholder="123456" maxlength="9" pattern="\d{6,9}" size="10"
+             autocomplete="off" inputmode="numeric" required autofocus>
+      <input type="submit" value="Submit">
     </div>
-    <input type="submit" value="Submit">
+    <div id="verify-totp-error" class="bz_default_hidden"></div>
   </form>
 </div>