From a1b64f3f87e21fb7c2fa6f6abeddc52918146ee4 Mon Sep 17 00:00:00 2001
From: Roly Gutierrez <roly.gutierrez@processmaker.com>
Date: Tue, 21 Jul 2026 09:46:39 -0400
Subject: [PATCH] =?UTF-8?q?FOUR-32290=20Login=20page=20layout=20is=20not?=
 =?UTF-8?q?=20responsive=20=E2=80=93=20elements=20overlap=20and=20truncate?=
 =?UTF-8?q?=20on=20mobile=20devices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Description:
The login page (/login) does not render correctly on mobile screen sizes (width < 768px). UI elements overlap, text is cut off, and the "Login" button is partially hidden, making it impossible for users to complete the login flow on mobile devices.

Related tickets:
https://processmaker.atlassian.net/browse/FOUR-32290
---
 .../views/auth/partials/auth-styles.blade.php | 40 +++++++++++++++++++
 .../partials/login-extra-styles.blade.php     |  8 ++++
 2 files changed, 48 insertions(+)

diff --git a/resources/views/auth/partials/auth-styles.blade.php b/resources/views/auth/partials/auth-styles.blade.php
index c3da7e4abf..2a2076a9ab 100644
--- a/resources/views/auth/partials/auth-styles.blade.php
+++ b/resources/views/auth/partials/auth-styles.blade.php
@@ -365,11 +365,51 @@
     .small-screen {
       border: 0;
       background: transparent;
+      flex: 0 0 auto;
+    }
+
+    .login-layout,
+    .login-layout.h-100-vh {
+      align-items: flex-start;
+      height: auto;
+      min-height: auto;
+      padding: 1rem 1rem 4.5rem;
+    }
+
+    .h-100-vh {
+      height: auto;
+    }
+
+    .login-panel {
+      width: 100%;
+    }
+
+    .login-logo {
+      margin-bottom: 1.5rem;
+    }
+
+    .login-logo-custom,
+    .login-logo-default {
+      max-width: 240px;
     }
 
     .login-container {
       max-width: 100%;
+      padding: 1.5rem 1.25rem 1.75rem;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
     }
+
+    .password-field-header {
+      flex-wrap: wrap;
+    }
+
+    .caps-lock-warning {
+      white-space: normal;
+    }
+
+    .footer {
+      margin-left: 0;
+      padding: 0 1rem 1rem;
+    }
   }
 </style>
diff --git a/resources/views/auth/partials/login-extra-styles.blade.php b/resources/views/auth/partials/login-extra-styles.blade.php
index a4ced842e2..b61533d351 100644
--- a/resources/views/auth/partials/login-extra-styles.blade.php
+++ b/resources/views/auth/partials/login-extra-styles.blade.php
@@ -103,5 +103,13 @@
     .login-remember {
       width: 100%;
     }
+
+    .forgot-password-link {
+      white-space: normal;
+    }
+
+    .login-addons {
+      margin-top: 0.5rem;
+    }
   }
 </style>