4f7feb0c81142e6ff34ba5a23bee77d2e04a945d
hiram
  Thu Aug 6 13:25:41 2026 -0700
reposition the hide/show icon outside the password box and show mouse over information about the function refs #37921

diff --git src/hg/hgLogin/hgLogin.c src/hg/hgLogin/hgLogin.c
index 3445e3459d7..595cb879f59 100644
--- src/hg/hgLogin/hgLogin.c
+++ src/hg/hgLogin/hgLogin.c
@@ -731,39 +731,39 @@
 /* Set up  new user account and send activation mail to user */
 {
 char query[256];
 char *token = generateRandomPassword();
 char *tokenMD5 = generateTokenMD5(token);
 sqlSafef(query,sizeof(query), "UPDATE gbMembers SET lastUse=NOW(),emailToken='%s', emailTokenExpires=DATE_ADD(NOW(), INTERVAL 7 DAY), accountActivated='N' WHERE userName='%s'",
     tokenMD5,
     username
     );
 sqlUpdate(conn, query);
 sendActivateMail(email, username, tokenMD5);
 return;
 }
 
 void printPwdEyeIcon(char *iconId, char *slashId)
-/* print a clickable eye icon, absolutely positioned inside a password
- * input's wrapper span; slashId is the <line> toggled to show "hidden".
- * No-op if disabled via hg.conf login.pwdEyeIcon. */
+/* print a clickable eye icon as a normal sibling right after a password
+ * input (not overlapping it); slashId is the <line> toggled to show
+ * "hidden". No-op if disabled via hg.conf login.pwdEyeIcon. */
 {
 if (!pwdEyeIconEnabled)
     return;
 hPrintf(
     "<span id=\"%s\" title=\"Show/hide password\" "
-    "style=\"position:absolute; right:8px; top:50%%; transform:translateY(-50%%); "
+    "style=\"display:inline-block; margin-left:6px; vertical-align:middle; "
     "cursor:pointer; user-select:none;\">"
     "<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" "
     "stroke=\"#666\" stroke-width=\"2\">"
     "<path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"/>"
     "<circle cx=\"12\" cy=\"12\" r=\"3\"/>"
     "<line id=\"%s\" x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" style=\"display:none;\"/>"
     "</svg>"
     "</span>", iconId, slashId);
 }
 
 void printPwdToggleJS()
 /* define the password show/hide toggle function used by all eye icons */
 {
 jsInline(
     "function togglePwdVisibility(inputId, slashId) {\n"
@@ -794,31 +794,31 @@
     "\n", hgLoginUrl);
 if (errMsg && sameString(errMsg, "Your account has been activated."))
     hPrintf("<span style='color:green;'>%s</span>\n", errMsg ? errMsg : "");
 else
     hPrintf("<span style='color:red;'>%s</span>\n", errMsg ? errMsg : "");
 hPrintf("<form method=post action=\"%s\" name=\"accountLoginForm\" id=\"accountLoginForm\">"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"userName\">Username</label>"
     "<input type=text name=\"hgLogin_userName\" value=\"%s\" size=\"30\" id=\"userName\">"
     "<a class=\"forgotLink\" href=\"%s?hgLogin.do.displayAccHelpPage=1&hgLogin_helpWith=username\">Forgot username</a>"
     "</div>"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"password\">Password</label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=password name=\"hgLogin_password\" value=\"\" size=\"30\" id=\"password\">"
     , hgLoginUrl, username, hgLoginUrl);
 printPwdEyeIcon("pwdEyeIcon", "pwdEyeSlash");
 hPrintf(
     "</span>"
     "<a class=\"forgotLink\" href=\"%s?hgLogin.do.displayAccHelpPage=1&hgLogin_helpWith=password\">Forgot password</a>"
     "</div>"
     "\n"
     "<div class=\"formControls\">"
     "   <input type=\"submit\" name=\"hgLogin.do.displayLogin\" value=\"Login\" class=\"largeButton\">"
     "    &nbsp;<a href=\"%s\" class=\"cancelButton\">Cancel</a>"
     "</div>"
     , hgLoginUrl, getReturnToURL());
 if (pwdEyeIconEnabled)
     {
@@ -877,49 +877,49 @@
     "<h3>Change Password</h3>"
     "\n"
     "<p> <span style='color:red;'>%s</span> </p>"
     "\n"
     "<form method=\"post\" action=\"%s\" name=\"changePasswordForm\" id=\"changePasswordForm\">"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"userName\">Username</label>"
     "<input type=\"text\" name=\"hgLogin_userName\" size=\"30\" value=\"%s\" id=\"email\">"
     "</div>"
     "\n", errMsg ? errMsg : "", hgLoginUrl,
     cartUsualString(cart, "hgLogin_userName", ""));
 hPrintf("<div class=\"inputGroup\">"
     "\n"
     "<label for=\"currentPw\">Current or Emailed Password</label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=\"password\" name=\"hgLogin_password\" value=\"\" size=\"30\" id=\"currentPw\">");
 printPwdEyeIcon("curPwEyeIcon", "curPwEyeSlash");
 hPrintf(
     "</span>"
     "</div>"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"newPw1\">New Password</label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=\"password\" name=\"hgLogin_newPassword1\" value=\"\" size=\"30\" id=\"newPw1\">");
 printPwdEyeIcon("newPw1EyeIcon", "newPw1EyeSlash");
 hPrintf(
     "</span>"
     "</div>"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"newPw2\">Re-enter New Password</label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=\"password\" name=\"hgLogin_newPassword2\" value=\"\" size=\"30\" id=\"newPw2\">");
 printPwdEyeIcon("newPw2EyeIcon", "newPw2EyeSlash");
 hPrintf(
     "</span>"
     "</div>"
     "\n"
     "<div class=\"formControls\">"
     "    <input type=\"submit\" name=\"hgLogin.do.changePassword\" value=\"Change Password\" class=\"largeButton\"> &nbsp; "
     "    <a href=\"%s\" class=\"cancelButton\">Cancel</a>"
     "\n"
     "</div>"
     "</form>"
     "\n"
     "</div><!-- END - changePwBox -->"
     "\n", getReturnToURL());
@@ -1283,41 +1283,41 @@
     "<label for=\"reenterEmail\">Re-enter Email address</label>"
     "<input type=text name=\"hgLogin_email2\" value=\"%s\" size=\"30\" id=\"emailCheck\">"
     "</div>\n",
     cartUsualString(cart, "hgLogin_userName", ""), cartUsualString(cart, "hgLogin_email", ""),
     cartUsualString(cart, "hgLogin_email2", ""));
 
 if (sqlFieldIndex(conn, "gbMembers", "recovEmail") != -1)
     hPrintf("<div class=\"inputGroup\">"
         "<label for=\"recovEmail\">Optional Secondary Recovery Email</label>"
         "<input type=text name=\"hgLogin_recovEmail\" size=\"30\" id=\"recovEmail\">"
         "</div>"
         "\n");
 
 hPrintf("<div class=\"inputGroup\">"
     "<label for=\"password\">Password <small>(must be at least 5 characters)</small></label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=password name=\"hgLogin_password\" value=\"%s\" size=\"30\" id=\"password\">",
     cartUsualString(cart, "hgLogin_password", ""));
 printPwdEyeIcon("signupPwEyeIcon", "signupPwEyeSlash");
 hPrintf(
     "</span>"
     "</div>"
     "\n"
     "<div class=\"inputGroup\">"
     "<label for=\"passwordCheck\">Re-enter Password</label>"
-    "<span style=\"position:relative; display:inline-block;\">"
+    "<span style=\"display:inline-flex; align-items:center;\">"
     "<input type=password name=\"hgLogin_password2\" value=\"%s\" size=\"30\" id=\"passwordCheck\">",
     cartUsualString(cart, "hgLogin_password2", ""));
 printPwdEyeIcon("signupPwCheckEyeIcon", "signupPwCheckEyeSlash");
 hPrintf(
     "</span>"
     "\n"
     "</div>"
     "\n"
     "<div class=\"formControls\">"
     "    <input type=\"submit\" name=\"hgLogin.do.signup\" value=\"Sign Up using Email\" class=\"largeButton\"> &nbsp; "
     "    <a href=\"%s\" class=\"cancelButton\">Cancel</a>"
     "</div>"
     "</form>"
     "</div><!-- END - signUpBox -->",
     getReturnToURL());