- Give the login card more bottom room for the autofill banner
- Browse files
-
bogdan committed 4 days ago
Safari's OTP autofill banner overlays just below the first box and was spilling past the card's bottom edge, looking cramped. Increase the card's bottom padding across breakpoints (110px desktop, down to 84px on short screens) so the banner sits within the card. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Showing 1 changed files
with
6 additions
and
4 deletions
+6
-4
scripts/host_manager.pl
@@ -1272,7 +1272,9 @@ sub app_html {
|
||
| 1272 | 1272 |
--login-form-width: calc((var(--otp-size) * 6) + (var(--otp-gap) * 5)); |
| 1273 | 1273 |
background: #fff; |
| 1274 | 1274 |
border-radius: 16px; |
| 1275 |
- padding: 54px 64px 34px; |
|
| 1275 |
+ /* Extra bottom room so Safari's OTP autofill banner, which overlays just |
|
| 1276 |
+ below the first box, sits inside the card instead of spilling past it. */ |
|
| 1277 |
+ padding: 54px 64px 110px; |
|
| 1276 | 1278 |
width: 100%; |
| 1277 | 1279 |
max-width: 680px; |
| 1278 | 1280 |
min-height: 360px; |
@@ -1340,7 +1342,7 @@ sub app_html {
|
||
| 1340 | 1342 |
.login-card {
|
| 1341 | 1343 |
max-width: 520px; |
| 1342 | 1344 |
min-height: 0; |
| 1343 |
- padding: 48px 36px 44px; |
|
| 1345 |
+ padding: 48px 36px 100px; |
|
| 1344 | 1346 |
gap: 26px; |
| 1345 | 1347 |
} |
| 1346 | 1348 |
.login-card .brand h1 { font-size: 24px; }
|
@@ -1352,14 +1354,14 @@ sub app_html {
|
||
| 1352 | 1354 |
.login-card {
|
| 1353 | 1355 |
--otp-size: 42px; |
| 1354 | 1356 |
--otp-gap: 12px; |
| 1355 |
- padding: 36px 22px 34px; |
|
| 1357 |
+ padding: 36px 22px 92px; |
|
| 1356 | 1358 |
} |
| 1357 | 1359 |
.otp-row input { height: 52px; }
|
| 1358 | 1360 |
.login-card form { padding-bottom: 0; }
|
| 1359 | 1361 |
} |
| 1360 | 1362 |
@media (max-height: 720px) {
|
| 1361 | 1363 |
#login-screen { padding-top: 28px; padding-bottom: 96px; }
|
| 1362 |
- .login-card { padding-top: 34px; padding-bottom: 34px; gap: 20px; }
|
|
| 1364 |
+ .login-card { padding-top: 34px; padding-bottom: 84px; gap: 20px; }
|
|
| 1363 | 1365 |
.login-card form { padding-bottom: 0; }
|
| 1364 | 1366 |
} |
| 1365 | 1367 |
|