From 60feb3cce2e122acba30eba17a585ce550b8a53b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20J=C3=A4rrud?= <marcushanssonmh@gmail.com>
Date: Fri, 24 Oct 2025 18:23:18 +0200
Subject: [PATCH] WebUI: Redesign login form

Make the Web UI login more mobile friendly.
The main action is moving to a column layout for the logo and form. This way it's easier for mobile to view the page but it doesn't affect the desktop experience much.

Secondary it set the input font size to be default text size, this in turn makes it so the mobile ui doesn't zoom in when you focus the inputs. [You can read more about it here](https://wsform.com/knowledgebase/why-forms-zoom-on-some-mobile-devices-and-browsers-and-how-to-control-it/).

PR #23360.
---
 src/webui/www/public/css/login.css | 15 ++++++++++++++-
 src/webui/www/public/index.html    |  4 ++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/webui/www/public/css/login.css b/src/webui/www/public/css/login.css
index bbf25e92e..0ab180b1b 100644
--- a/src/webui/www/public/css/login.css
+++ b/src/webui/www/public/css/login.css
@@ -16,12 +16,23 @@ body {
 }
 
 #main {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     padding-top: 5em;
     text-align: center;
 }
 
+.login-input {
+    box-sizing: border-box;
+    font-size: 1rem;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    width: 100%;
+}
+
 #formplace {
     padding: 10px;
     text-align: left;
@@ -33,7 +44,9 @@ body {
 }
 
 #loginButton {
-    float: right;
+    font-size: 1rem;
+    padding: 0.5rem;
+    width: 100%;
 }
 
 #logo img {
diff --git a/src/webui/www/public/index.html b/src/webui/www/public/index.html
index 18906cd0f..a9e748c1e 100644
--- a/src/webui/www/public/index.html
+++ b/src/webui/www/public/index.html
@@ -32,11 +32,11 @@
             <form id="loginform">
                 <div class="row">
                     <label for="username">QBT_TR(Username)QBT_TR[CONTEXT=Login]</label><br>
-                    <input type="text" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required>
+                    <input type="text" class="login-input" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required>
                 </div>
                 <div class="row">
                     <label for="password">QBT_TR(Password)QBT_TR[CONTEXT=Login]</label><br>
-                    <input type="password" id="password" name="password" autocomplete="current-password" required>
+                    <input type="password" class="login-input" id="password" name="password" autocomplete="current-password" required>
                 </div>
                 <div class="row">
                     <input type="submit" id="loginButton" value="QBT_TR(Login)QBT_TR[CONTEXT=Login]">