From 1614ac3f3d2097c728b648eb6db1f6e016cc7965 Mon Sep 17 00:00:00 2001
From: Qi HU <github@spcsky.com>
Date: Mon, 13 Oct 2025 12:15:15 +0800
Subject: [PATCH] refactor(ui): improve captcha form responsiveness

- adjust layout spacing on public auth-related templates
- ensure captcha challenge areas remain visible on small screens
- align image driver output with refreshed markup

Signed-off-by: Qi HU <github@spcsky.com>
---
 .../Captcha/Drivers/ImageCaptchaDriver.php        |  2 +-
 public/complains.php                              |  8 ++++++--
 public/confirm_resend.php                         | 15 ++++++++-------
 public/login.php                                  |  7 ++++---
 public/recover.php                                |  3 ++-
 public/signup.php                                 | 13 +++++++------
 6 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/Services/Captcha/Drivers/ImageCaptchaDriver.php b/app/Services/Captcha/Drivers/ImageCaptchaDriver.php
index 69952c99..05adf6bb 100644
--- a/app/Services/Captcha/Drivers/ImageCaptchaDriver.php
+++ b/app/Services/Captcha/Drivers/ImageCaptchaDriver.php
@@ -31,7 +31,7 @@ class ImageCaptchaDriver implements CaptchaDriverInterface
 
         return implode("\n", [
             sprintf('<tr><td class="rowhead">%s</td><td align="left"><img src="%s" border="0" alt="CAPTCHA" /></td></tr>', htmlspecialchars($imageLabel, ENT_QUOTES, 'UTF-8'), $imageUrl),
-            sprintf('<tr><td class="rowhead">%s</td><td align="left"><input type="text" autocomplete="off" style="width: 180px; border: 1px solid gray" name="imagestring" value="" /><input type="hidden" name="imagehash" value="%s" /></td></tr>', htmlspecialchars($codeLabel, ENT_QUOTES, 'UTF-8'), htmlspecialchars($imagehash, ENT_QUOTES, 'UTF-8')),
+            sprintf('<tr><td class="rowhead">%s</td><td align="left"><input type="text" autocomplete="off" style="width: 100%%; min-width: 180px; border: 1px solid gray; box-sizing: border-box" name="imagestring" value="" /><input type="hidden" name="imagehash" value="%s" /></td></tr>', htmlspecialchars($codeLabel, ENT_QUOTES, 'UTF-8'), htmlspecialchars($imagehash, ENT_QUOTES, 'UTF-8')),
         ]);
     }
 
diff --git a/public/complains.php b/public/complains.php
index 91b80f5b..52a913b4 100644
--- a/public/complains.php
+++ b/public/complains.php
@@ -164,9 +164,13 @@ if($_SERVER['REQUEST_METHOD'] === 'POST'){
             <h2><?= $lang_complains['text_new_complain'] ?></h2>
             <form action="" method="post">
                 <input type="hidden" name="action" value="new" />
+                <?php
+                $inputStyle = 'style="width: min(100%, 420px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"';
+                $textareaStyle = 'style="width: min(100%, 420px); min-width: 180px; border: 1px solid gray; box-sizing: border-box; height: 250px; resize: vertical;"';
+                ?>
                 <table border="0" cellpadding="5">
-                    <tr><td class="rowhead"><?php echo $lang_complains['text_new_email']?></td><td class="rowfollow" align="left"><input type="email" name="email" style="width: 180px; border: 1px solid gray" /></td></tr>
-                    <tr><td class="rowhead"><?php echo $lang_complains['text_new_body']?></td><td class="rowfollow" align="left"><textarea name="body" style="width: 200px; height: 250px" placeholder="<?= $lang_complains['text_new_body_placeholder'] ?>"></textarea></td></tr>
+                    <tr><td class="rowhead"><?php echo $lang_complains['text_new_email']?></td><td class="rowfollow" align="left"><input type="email" name="email" <?php echo $inputStyle; ?> autocomplete="email" /></td></tr>
+                    <tr><td class="rowhead"><?php echo $lang_complains['text_new_body']?></td><td class="rowfollow" align="left"><textarea name="body" <?php echo $textareaStyle; ?> placeholder="<?= $lang_complains['text_new_body_placeholder'] ?>"></textarea></td></tr>
                     <?php show_image_code (); ?>
                     <tr><td class="toolbox" colspan="2" align="center"><input type="submit" value="<?= $lang_complains['text_new_submit']?>" class="btn" /></td></tr>
                 </table>
diff --git a/public/confirm_resend.php b/public/confirm_resend.php
index 0022b1d9..86673660 100644
--- a/public/confirm_resend.php
+++ b/public/confirm_resend.php
@@ -110,13 +110,14 @@ else
 	</form>
 	<?php echo sprintf($lang_confirm_resend['text_resend_confirmation_mail_note'], $maxloginattempts)?>
 	<p><?php echo $lang_confirm_resend['text_you_have'] ?><b><?php echo remaining ();?></b><?php echo $lang_confirm_resend['text_remaining_tries'] ?></p>
-	<form method="post" action="confirm_resend.php">
-	<table border="1" cellspacing="0" cellpadding="10">
-	<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_registered_email'] ?></td>
-	<td class="rowfollow"><input type="text" style="width: 200px" name="email" /></td></tr>
-	<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_new_password'] ?></td><td align="left"><input type="password" style="width: 200px" name="wantpassword" /><br />
-		<font class="small"><?php echo $lang_confirm_resend['text_password_note'] ?></font></td></tr>
-	<tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_enter_password_again'] ?></td><td align="left"><input type="password" style="width: 200px" name="passagain" /></td></tr>
+    <?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
+    <form method="post" action="confirm_resend.php">
+    <table border="1" cellspacing="0" cellpadding="10" style="width: min(100%, 420px);">
+    <tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_registered_email'] ?></td>
+    <td class="rowfollow"><input type="email" name="email" autocomplete="email" <?php echo $formInputStyle; ?> /></td></tr>
+    <tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_new_password'] ?></td><td align="left"><input type="password" name="wantpassword" autocomplete="new-password" <?php echo $formInputStyle; ?> /><br />
+        <font class="small"><?php echo $lang_confirm_resend['text_password_note'] ?></font></td></tr>
+    <tr><td class="rowhead nowrap"><?php echo $lang_confirm_resend['row_enter_password_again'] ?></td><td align="left"><input type="password" name="passagain" autocomplete="new-password" <?php echo $formInputStyle; ?> /></td></tr>
 	<?php
 	show_image_code();
 	?>
diff --git a/public/login.php b/public/login.php
index ed7d14d2..9aac3024 100644
--- a/public/login.php
+++ b/public/login.php
@@ -59,9 +59,10 @@ if (!$useChallengeResponseAuthentication) {
 <p><?php echo $lang_login['p_need_cookies_enables']?><br /> [<b><?php echo $maxloginattempts;?></b>] <?php echo $lang_login['p_fail_ban']?></p>
 <p><?php echo $lang_login['p_you_have']?> <b><?php echo remaining ();?></b> <?php echo $lang_login['p_remaining_tries']?></p>
 <table border="0" cellpadding="5">
-<tr><td class="rowhead"><?php echo $lang_login['rowhead_username']?></td><td class="rowfollow" align="left"><input type="text" class="username" name="username" style="width: 180px; border: 1px solid gray" /></td></tr>
-<tr><td class="rowhead"><?php echo $lang_login['rowhead_password']?></td><td class="rowfollow" align="left"><input type="password" <?php echo $passwordName ?> style="width: 180px; border: 1px solid gray"/></td></tr>
-<tr><td class="rowhead"><?php echo $lang_login['rowhead_two_step_code']?></td><td class="rowfollow" align="left"><input type="text" name="two_step_code"  placeholder="<?php echo $lang_login['two_step_code_tooltip'] ?>" style="width: 180px; border: 1px solid gray"/></td></tr>
+<?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
+<tr><td class="rowhead"><?php echo $lang_login['rowhead_username']?></td><td class="rowfollow" align="left"><input type="text" class="username" name="username" autocomplete="username" <?php echo $formInputStyle; ?> /></td></tr>
+<tr><td class="rowhead"><?php echo $lang_login['rowhead_password']?></td><td class="rowfollow" align="left"><input type="password" <?php echo $passwordName ?> autocomplete="current-password" <?php echo $formInputStyle; ?> /></td></tr>
+<tr><td class="rowhead"><?php echo $lang_login['rowhead_two_step_code']?></td><td class="rowfollow" align="left"><input type="text" name="two_step_code" inputmode="numeric" pattern="[0-9]*" placeholder="<?php echo $lang_login['two_step_code_tooltip'] ?>" <?php echo $formInputStyle; ?> /></td></tr>
 <?php
 show_image_code ();
 if ($securelogin == "yes")
diff --git a/public/recover.php b/public/recover.php
index 5e5979cc..e715d1bb 100644
--- a/public/recover.php
+++ b/public/recover.php
@@ -139,7 +139,8 @@ else
 	<form method="post" action="recover.php">
 	<table border="1" cellspacing="0" cellpadding="10">
 	<tr><td class="rowhead"><?php echo $lang_recover['row_registered_email'] ?></td>
-	<td class="rowfollow"><input type="text" style="width: 150px" name="email" /></td></tr>
+<?php $formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"'; ?>
+<td class="rowfollow"><input type="email" <?php echo $formInputStyle; ?> name="email" autocomplete="email" /></td></tr>
 	<?php
 	show_image_code ();
 	?>
diff --git a/public/signup.php b/public/signup.php
index a0fffbdc..756697c4 100644
--- a/public/signup.php
+++ b/public/signup.php
@@ -78,24 +78,25 @@ print("<div align=right valign=top>".$lang_signup['text_select_lang']. $s . "</d
 <table border="1" cellspacing="0" cellpadding="10">
 <?php
 print("<tr><td class=text align=center colspan=2>".$lang_signup['text_cookies_note']."</td></tr>");
+$formInputStyle = 'style="width: min(100%, 320px); min-width: 180px; border: 1px solid gray; box-sizing: border-box"';
 if ($isPreRegisterEmailAndUsername && !empty($inv["pre_register_username"])) {
-    $usernameInput = sprintf('<input type="text" style="width: 200px" name="wantusername" value="%s" readonly />', $inv["pre_register_username"]);
+    $usernameInput = sprintf('<input type="text" %s name="wantusername" value="%s" readonly autocomplete="username" />', $formInputStyle, htmlspecialchars($inv["pre_register_username"], ENT_QUOTES));
 } else {
-    $usernameInput = '<input type="text" style="width: 200px" name="wantusername" />';
+    $usernameInput = '<input type="text" ' . $formInputStyle . ' name="wantusername" autocomplete="username" />';
 }
 
 if ($isPreRegisterEmailAndUsername && !empty($inv["pre_register_email"])) {
-    $emailInput = sprintf('<input type="text" style="width: 200px" name="email" value="%s" readonly />', $inv["pre_register_email"]);
+    $emailInput = sprintf('<input type="email" %s name="email" value="%s" readonly autocomplete="email" />', $formInputStyle, htmlspecialchars($inv["pre_register_email"], ENT_QUOTES));
 } else {
-    $emailInput = '<input type="text" style="width: 200px" name="email" />';
+    $emailInput = '<input type="email" ' . $formInputStyle . ' name="email" autocomplete="email" />';
 }
 
 ?>
 <tr><td class=rowhead><?php echo $lang_signup['row_desired_username'] ?></td><td class=rowfollow align=left><?php echo $usernameInput?><br />
 <font class=small><?php echo $lang_signup['text_allowed_characters'] ?></font></td></tr>
-<tr><td class=rowhead><?php echo $lang_signup['row_pick_a_password'] ?></td><td class=rowfollow align=left><input type="password" style="width: 200px" class="wantpassword"/><br />
+<tr><td class=rowhead><?php echo $lang_signup['row_pick_a_password'] ?></td><td class=rowfollow align=left><input type="password" <?php echo $formInputStyle; ?> class="wantpassword" autocomplete="new-password" /><br />
 	<font class=small><?php echo $lang_signup['text_minimum_six_characters'] ?></font></td></tr>
-<tr><td class=rowhead><?php echo $lang_signup['row_enter_password_again'] ?></td><td class=rowfollow align=left><input type="password" style="width: 200px" class="passagain" /></td></tr>
+<tr><td class=rowhead><?php echo $lang_signup['row_enter_password_again'] ?></td><td class=rowfollow align=left><input type="password" <?php echo $formInputStyle; ?> class="passagain" autocomplete="new-password" /></td></tr>
 <?php
 show_image_code ();
 ?>