From bc01ac0ce0d3d4868750b8993240689f50b3e06d Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 29 Jul 2026 01:12:47 -0300
Subject: [PATCH] Fix modal markup

- move buttons to the end of the modal-header
- remove the "hidden" attribute from the QR code element
- replace the old `.col-md-offset-3` class with the new `.offset-md-3`

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 settings-api.lp        | 8 ++++----
 settings-teleporter.lp | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/settings-api.lp b/settings-api.lp
index 5a1c7270..d955153a 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -177,8 +177,8 @@ PageTitle = "Web Interface - API Settings"
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         <h4 class="modal-title">Enable two-factor authentication</h4>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>Use a phone app like Google Authenticator, 2FA Authenticator, FreeOTP or Bitwarden, etc. to get 2FA codes when prompted during login.</p>
@@ -187,12 +187,12 @@ PageTitle = "Web Interface - API Settings"
                             <i id="qrcode-spinner" class="fas fa-spinner fa-pulse fa-5x"></i>
                         </div>
                         <div class="text-center">
-                            <canvas id="qrcode" class="qrcode" title="QR Code" hidden="true"></canvas>
+                            <canvas id="qrcode" class="qrcode" title="QR Code"></canvas>
                         </div>
                         <p class="text-center"><code id="totp_secret"></code></p>
                         <p>2. Enter the 2FA code from your app below to confirm that you have set up 2FA correctly.</p>
                         <div class="row">
-                            <div class="col-md-6 col-md-offset-3">
+                            <div class="col-md-6 offset-md-3">
                                 <div id="totp_div">
                                     <div class="pwd-field form-group has-error">
                                         <div class="input-group">
@@ -219,8 +219,8 @@ PageTitle = "Web Interface - API Settings"
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         <h4 class="modal-title">Configure application password</h4>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>After you turn on two-factor (2FA) verification and set up an
diff --git a/settings-teleporter.lp b/settings-teleporter.lp
index 62c3fad9..1925952e 100644
--- a/settings-teleporter.lp
+++ b/settings-teleporter.lp
@@ -67,8 +67,8 @@ PageTitle = "Teleporter"
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         <h4 class="modal-title">Importing Pi-hole teleporter file...</h4>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>Depending on your network speed, it may take a few moments until the file is uploaded and imported. Please be patient and don't interrupt the process...</p>