2 files changed, 17 insertions, 3 deletions
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 2bd3a535..498b7068 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -675,6 +675,10 @@ template {
     max-width: 300px;
 }
 
+.webauthn {
+    margin-bottom: 20px;
+}
+
 /* Counters */
 .unread-counter-wrapper,
 .error-feeds-counter-wrapper {
diff --git a/internal/ui/static/js/webauthn_handler.js b/internal/ui/static/js/webauthn_handler.js
index 32752d54..60a6a25c 100644
--- a/internal/ui/static/js/webauthn_handler.js
+++ b/internal/ui/static/js/webauthn_handler.js
@@ -5,10 +5,20 @@ class WebAuthnHandler {
 
     static showErrorMessage(errorMessage) {
         console.log("webauthn error: " + errorMessage);
-        const alertElement = document.getElementById("webauthn-error");
+
+        const alertElement = document.getElementById("webauthn-error-alert");
         if (alertElement) {
-            alertElement.textContent += " (" + errorMessage + ")";
-            alertElement.classList.remove("hidden");
+            alertElement.remove();
+        }
+
+        const alertTemplateElement = document.getElementById("webauthn-error");
+        if (alertTemplateElement) {
+            const clonedElement = alertTemplateElement.content.cloneNode(true);
+            const errorMessageElement = clonedElement.getElementById("webauthn-error-message");
+            if (errorMessageElement) {
+                errorMessageElement.textContent = errorMessage;
+            }
+            alertTemplateElement.parentNode.insertBefore(clonedElement, alertTemplateElement);
         }
     }