From 68d34bd33d7c9ef1244d593bd761d78761edf4f7 Mon Sep 17 00:00:00 2001
From: Vera de Kok <veradekok@gmail.com>
Date: Thu, 25 Jun 2026 21:03:28 +0200
Subject: [PATCH 1/3] Fix login form: use label elements instead of th for
 accessibility

---
 resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
index 08c890d381ed..2b3488f84213 100644
--- a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
+++ b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
@@ -24,14 +24,14 @@ <h1>Sign In to Gerrit Code Review at <span id="hostName">example.com</span></h1>
       <form method="POST" action="#" id="login_form" autocomplete="off" onsubmit="return shouldSubmit()">
         <table style="border: 0;">
         <tr>
-          <th>Username</th>
+          <td><label for="f_user">Username</label></td>
           <td><input name="username" id="f_user"
                      type="text"
                      size="25"
                      tabindex="1" /></td>
         </tr>
         <tr>
-          <th>Password</th>
+          <td><label for="f_pass">Password</label></td>
           <td><input name="password" id="f_pass"
                      type="password"
                      size="25"

From 84c728d0c798a137e216a6711a43b753c4e11556 Mon Sep 17 00:00:00 2001
From: Vera de Kok <veradekok@gmail.com>
Date: Sun, 30 Aug 2026 10:52:07 +0200
Subject: [PATCH 2/3] Fix login form: mobile-friendly responsive layout

Add a viewport meta tag and responsive CSS to the LDAP login form so it
renders correctly on mobile devices. The fixed-width table layout is
flattened into a single column, the form is shown as a centered card
(max-width 400px), and inputs/labels/buttons are styled for touch use.
A media query adjusts card padding on narrow (<440px) screens.
---
 .../gerrit/httpd/auth/ldap/LoginForm.html     | 175 ++++++++++++++++++
 1 file changed, 175 insertions(+)

diff --git a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
index 2b3488f84213..43ad3d5ea906 100644
--- a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
+++ b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
@@ -1,5 +1,6 @@
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Gerrit Code Review - Sign In</title>
     <style type="text/css">
       #error_message {
@@ -95,5 +96,179 @@ <h1>Sign In to Gerrit Code Review at <span id="hostName">example.com</span></h1>
       f_user.focus();
     ]]>
     </script>
+    <style type="text/css">
+      /* === Mobile-friendly login layout === */
+
+      /* Form card */
+      #login_form {
+        position: relative;
+        width: calc(100% - 24px) !important;
+        max-width: 400px !important;
+        padding: 32px 28px 32px !important;
+        margin: 20px auto !important;
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+      }
+
+      /* Flatten table to simple column layout */
+      #login_form table,
+      #login_form table tbody,
+      #login_form table tbody tr {
+        display: block;
+      }
+      #login_form table {
+        padding-top: 0;
+      }
+      #login_form table tbody tr {
+        margin-bottom: 4px !important;
+      }
+      #login_form table tbody td {
+        display: block;
+      }
+
+      /* Hide leftover empty <td></td> spacer cells */
+      #login_form table tbody tr:nth-child(3) td:first-child,
+      #login_form table tbody tr:nth-child(4) td:first-child {
+        display: none;
+      }
+
+      /* === Inputs === */
+      #login_form input[type=text],
+      #login_form input[type=password] {
+        width: 100%;
+        height: 32px;
+        padding: 4px 12px;
+        font-size: 16px;
+        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
+        color: #202122;
+        background: #fff;
+        border: 1px solid #a2a9b1;
+        border-radius: 2px;
+        outline: 0;
+        transition: border-color 250ms,box-shadow 250ms;
+      }
+      #login_form input[type=text]:focus,
+      #login_form input[type=password]:focus {
+        border-color: #36c;
+        box-shadow: 0 0 0 1px #36c;
+      }
+
+      /* === Labels === */
+      #login_form table tbody td label {
+        display: block;
+        font-size: 14px;
+        font-weight: 700;
+        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
+        color: #202122;
+        margin-bottom: 4px;
+        padding-left: 0;
+      }
+
+      /* === Primary button (Sign In) === */
+      #login_form input[type=submit] {
+        display: block;
+        width: 100%;
+        height: 32px;
+        padding: 0 16px;
+        font-size: 16px;
+        font-weight: 700;
+        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
+        color: #fff !important;
+        background: #36c !important;
+        border: 1px solid transparent !important;
+        border-radius: 0;
+        cursor: pointer;
+        margin: 4px 0 0;
+        line-height: 32px;
+        transition: background 250ms;
+      }
+      #login_form input[type=submit]:hover {
+        background: #3056a9 !important;
+        color: #fff !important;
+      }
+
+      /* === Secondary button (Cancel) === */
+      #login_form a#cancel_link {
+        display: block;
+        width: 100%;
+        height: 32px;
+        padding: 0 16px;
+        font-size: 16px;
+        font-weight: 700;
+        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
+        color: #202122 !important;
+        background: #f8f9fa !important;
+        border: 1px solid #a2a9b1 !important;
+        border-radius: 0;
+        text-align: center !important;
+        text-decoration: none;
+        margin: 6px auto 0 !important;
+        line-height: 32px;
+        cursor: pointer;
+        transition: background 250ms;
+      }
+      #login_form a#cancel_link:hover,
+      #login_form a#cancel_link:focus {
+        background: #eaecf0 !important;
+        color: #202122 !important;
+        text-decoration: none;
+      }
+
+      /* === Remember me row: compact, native checkbox === */
+      #login_form table tbody tr:nth-child(3) {
+        margin-bottom: 12px !important;
+      }
+      #login_form table tbody tr:nth-child(3) td {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      #login_form table tbody tr:nth-child(3) td label {
+        margin-bottom: 0;
+        font-weight: 400;
+      }
+      #login_form #f_remember {
+        margin: 0;
+        width: 20px;
+        height: 20px;
+        min-width: 20px;
+        min-height: 20px;
+        accent-color: #36c;
+      }
+
+      /* === Error === */
+      #error_message {
+        width: auto !important;
+        max-width: 400px;
+        margin: 0 auto 16px !important;
+        padding: 8px 12px;
+        background: #ffe9e5;
+        border: 1px solid #bf3c2c;
+        border-radius: 2px;
+        color: #202122;
+        font-weight: 400;
+        font-size: 14px;
+      }
+
+      /* === Box-sizing === */
+      #login_form *,
+      #login_form *:before,
+      #login_form *:after,
+      #error_message,
+      #error_message:before,
+      #error_message:after {
+        box-sizing: border-box;
+      }
+
+      /* === Narrow === */
+      @media (max-width: 440px) {
+        #login_form {
+          padding: 32px 16px 24px !important;
+          margin: 8px auto !important;
+          border-radius: 0;
+        }
+      }
+    </style>
   </body>
 </html>

From d6c5360d55f0cdc9f1ba24282cf8b433e316223f Mon Sep 17 00:00:00 2001
From: Vera de Kok <mail@veradekok.nl>
Date: Sun, 30 Aug 2026 12:08:40 +0200
Subject: [PATCH 3/3] Minimize responsive login form CSS

Replace the 175-line mobile style block with a small media query that stacks the table in a single column and makes inputs full width (plus 16px font size to avoid iOS auto-zoom). Desktop appearance is unchanged since the new rules are scoped to narrow screens.
---
 .../gerrit/httpd/auth/ldap/LoginForm.html     | 190 ++----------------
 1 file changed, 16 insertions(+), 174 deletions(-)

diff --git a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
index 43ad3d5ea906..80112a3f05ef 100644
--- a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
+++ b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html
@@ -13,6 +13,22 @@
       #cancel_link {
         margin-left: 45px;
       }
+      /* Stack the form in a single column on small screens so it fits
+         without horizontal scrolling; inputs fill the row width. */
+      @media (max-width: 600px) {
+        #login_form table,
+        #login_form table tbody,
+        #login_form table tr,
+        #login_form table td {
+          display: block;
+        }
+        #login_form input[type="text"],
+        #login_form input[type="password"] {
+          width: 100%;
+          box-sizing: border-box;
+          font-size: 16px; /* avoid iOS auto-zoom on focus */
+        }
+      }
     </style>
     <style id="gerrit_sitecss" type="text/css"></style>
   </head>
@@ -96,179 +112,5 @@ <h1>Sign In to Gerrit Code Review at <span id="hostName">example.com</span></h1>
       f_user.focus();
     ]]>
     </script>
-    <style type="text/css">
-      /* === Mobile-friendly login layout === */
-
-      /* Form card */
-      #login_form {
-        position: relative;
-        width: calc(100% - 24px) !important;
-        max-width: 400px !important;
-        padding: 32px 28px 32px !important;
-        margin: 20px auto !important;
-        background: #fff;
-        border-radius: 4px;
-        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-      }
-
-      /* Flatten table to simple column layout */
-      #login_form table,
-      #login_form table tbody,
-      #login_form table tbody tr {
-        display: block;
-      }
-      #login_form table {
-        padding-top: 0;
-      }
-      #login_form table tbody tr {
-        margin-bottom: 4px !important;
-      }
-      #login_form table tbody td {
-        display: block;
-      }
-
-      /* Hide leftover empty <td></td> spacer cells */
-      #login_form table tbody tr:nth-child(3) td:first-child,
-      #login_form table tbody tr:nth-child(4) td:first-child {
-        display: none;
-      }
-
-      /* === Inputs === */
-      #login_form input[type=text],
-      #login_form input[type=password] {
-        width: 100%;
-        height: 32px;
-        padding: 4px 12px;
-        font-size: 16px;
-        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
-        color: #202122;
-        background: #fff;
-        border: 1px solid #a2a9b1;
-        border-radius: 2px;
-        outline: 0;
-        transition: border-color 250ms,box-shadow 250ms;
-      }
-      #login_form input[type=text]:focus,
-      #login_form input[type=password]:focus {
-        border-color: #36c;
-        box-shadow: 0 0 0 1px #36c;
-      }
-
-      /* === Labels === */
-      #login_form table tbody td label {
-        display: block;
-        font-size: 14px;
-        font-weight: 700;
-        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
-        color: #202122;
-        margin-bottom: 4px;
-        padding-left: 0;
-      }
-
-      /* === Primary button (Sign In) === */
-      #login_form input[type=submit] {
-        display: block;
-        width: 100%;
-        height: 32px;
-        padding: 0 16px;
-        font-size: 16px;
-        font-weight: 700;
-        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
-        color: #fff !important;
-        background: #36c !important;
-        border: 1px solid transparent !important;
-        border-radius: 0;
-        cursor: pointer;
-        margin: 4px 0 0;
-        line-height: 32px;
-        transition: background 250ms;
-      }
-      #login_form input[type=submit]:hover {
-        background: #3056a9 !important;
-        color: #fff !important;
-      }
-
-      /* === Secondary button (Cancel) === */
-      #login_form a#cancel_link {
-        display: block;
-        width: 100%;
-        height: 32px;
-        padding: 0 16px;
-        font-size: 16px;
-        font-weight: 700;
-        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;
-        color: #202122 !important;
-        background: #f8f9fa !important;
-        border: 1px solid #a2a9b1 !important;
-        border-radius: 0;
-        text-align: center !important;
-        text-decoration: none;
-        margin: 6px auto 0 !important;
-        line-height: 32px;
-        cursor: pointer;
-        transition: background 250ms;
-      }
-      #login_form a#cancel_link:hover,
-      #login_form a#cancel_link:focus {
-        background: #eaecf0 !important;
-        color: #202122 !important;
-        text-decoration: none;
-      }
-
-      /* === Remember me row: compact, native checkbox === */
-      #login_form table tbody tr:nth-child(3) {
-        margin-bottom: 12px !important;
-      }
-      #login_form table tbody tr:nth-child(3) td {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      #login_form table tbody tr:nth-child(3) td label {
-        margin-bottom: 0;
-        font-weight: 400;
-      }
-      #login_form #f_remember {
-        margin: 0;
-        width: 20px;
-        height: 20px;
-        min-width: 20px;
-        min-height: 20px;
-        accent-color: #36c;
-      }
-
-      /* === Error === */
-      #error_message {
-        width: auto !important;
-        max-width: 400px;
-        margin: 0 auto 16px !important;
-        padding: 8px 12px;
-        background: #ffe9e5;
-        border: 1px solid #bf3c2c;
-        border-radius: 2px;
-        color: #202122;
-        font-weight: 400;
-        font-size: 14px;
-      }
-
-      /* === Box-sizing === */
-      #login_form *,
-      #login_form *:before,
-      #login_form *:after,
-      #error_message,
-      #error_message:before,
-      #error_message:after {
-        box-sizing: border-box;
-      }
-
-      /* === Narrow === */
-      @media (max-width: 440px) {
-        #login_form {
-          padding: 32px 16px 24px !important;
-          margin: 8px auto !important;
-          border-radius: 0;
-        }
-      }
-    </style>
   </body>
 </html>

Username	Username
Password	Password	Date: Sun, 30 Aug 2026 10:52:07 +0200 Subject: [PATCH 2/3] Fix login form: mobile-friendly responsive layout Add a viewport meta tag and responsive CSS to the LDAP login form so it renders correctly on mobile devices. The fixed-width table layout is flattened into a single column, the form is shown as a centered card (max-width 400px), and inputs/labels/buttons are styled for touch use. A media query adjusts card padding on narrow (<440px) screens. --- .../gerrit/httpd/auth/ldap/LoginForm.html \| 175 ++++++++++++++++++ 1 file changed, 175 insertions(+) diff --git a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html index 2b3488f84213..43ad3d5ea906 100644 --- a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html +++ b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html @@ -1,5 +1,6 @@ + Gerrit Code Review - Sign In From d6c5360d55f0cdc9f1ba24282cf8b433e316223f Mon Sep 17 00:00:00 2001 From: Vera de Kok Date: Sun, 30 Aug 2026 12:08:40 +0200 Subject: [PATCH 3/3] Minimize responsive login form CSS Replace the 175-line mobile style block with a small media query that stacks the table in a single column and makes inputs full width (plus 16px font size to avoid iOS auto-zoom). Desktop appearance is unchanged since the new rules are scoped to narrow screens. --- .../gerrit/httpd/auth/ldap/LoginForm.html \| 190 ++---------------- 1 file changed, 16 insertions(+), 174 deletions(-) diff --git a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html index 43ad3d5ea906..80112a3f05ef 100644 --- a/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html +++ b/resources/com/google/gerrit/httpd/auth/ldap/LoginForm.html @@ -13,6 +13,22 @@ #cancel_link { margin-left: 45px; } + /* Stack the form in a single column on small screens so it fits + without horizontal scrolling; inputs fill the row width. / + @media (max-width: 600px) { + #login_form table, + #login_form table tbody, + #login_form table tr, + #login_form table td { + display: block; + } + #login_form input[type="text"], + #login_form input[type="password"] { + width: 100%; + box-sizing: border-box; + font-size: 16px; / avoid iOS auto-zoom on focus */ + } + } @@ -96,179 +112,5 @@ Sign In to Gerrit Code Review at example.com f_user.focus(); ]]> -