- Move login error above the OTP boxes
- Browse files
-
bogdan committed 4 days ago
The "Cod incorect." message sat below the boxes, exactly where Safari anchors its OTP autofill banner (which reappears after a failed submit when focus returns to the first box). The banner covered the error, so it was only visible after dismissing the autofill offer. Move #login-error between the subtitle and the boxes, where it never collides with the autofill banner. Tighten its margins so it does not add much vertical space when empty; the reserved min-height still prevents layout shift. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Showing 1 changed files
with
2 additions
and
2 deletions
+2
-2
scripts/host_manager.pl
@@ -1334,7 +1334,7 @@ sub app_html {
|
||
| 1334 | 1334 |
.otp-row input.filled { border-color: #b3c6f0; background: #fff; }
|
| 1335 | 1335 |
#login-error {
|
| 1336 | 1336 |
color: var(--bad); font-size: 13px; text-align: center; |
| 1337 |
- min-height: 18px; margin-top: -8px; |
|
| 1337 |
+ min-height: 18px; margin: -14px 0; |
|
| 1338 | 1338 |
} |
| 1339 | 1339 |
@media (max-width: 760px) {
|
| 1340 | 1340 |
.login-card {
|
@@ -1532,6 +1532,7 @@ sub app_html {
|
||
| 1532 | 1532 |
<h1>Madagascar Local Authority</h1> |
| 1533 | 1533 |
<p>Hosts, DNS & Local CA</p> |
| 1534 | 1534 |
</div> |
| 1535 |
+ <div id="login-error"></div> |
|
| 1535 | 1536 |
<form id="login-form" method="post" action="/api/login" autocomplete="on" novalidate> |
| 1536 | 1537 |
<div class="pm-helper-fields" aria-hidden="true"> |
| 1537 | 1538 |
<input type="text" id="login-account" name="username" autocomplete="username" autocapitalize="off" spellcheck="false"> |
@@ -1546,7 +1547,6 @@ sub app_html {
|
||
| 1546 | 1547 |
<input type="text" class="otp-digit" maxlength="1" inputmode="numeric" autocomplete="off" required aria-label="Digit 6"> |
| 1547 | 1548 |
</div> |
| 1548 | 1549 |
</form> |
| 1549 |
- <div id="login-error"></div> |
|
| 1550 | 1550 |
</div> |
| 1551 | 1551 |
</div> |
| 1552 | 1552 |
|