WEB-659 feat: full-screen login form on tablet view without hero panel (#3081)

src/app/login/login.component.html

@@ -7,8 +7,8 @@
 -->
 <!-- Modern Material Design 3 Login Layout -->
 <div class="login-wrapper">
-  <!-- Left Panel - Hero Section (Hidden on mobile) -->
+  <!-- Left Panel - Hero Section (Hidden on tablet and mobile) -->
-  <div class="hero-panel hide-lt-md" [class.production-mode]="productionMode">
+  <div class="hero-panel hide-lt-lg" [class.production-mode]="productionMode">
     <div class="hero-overlay"></div>
     <div class="hero-content">
       <!-- Default Mode: Full content -->

src/app/login/login.component.scss

@@ -6,7 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-// ===== Version Info Section - Modern Card Style =====
+// ===
+/// ===== Version Info Section - Modern Card Style =====
 .login-version-info {
   margin-bottom: 1rem;
   width: 100%;
@@ -690,37 +691,61 @@
 /* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
 @media (max-width: 1024px) {
   .hero-panel {
-    flex: 0 0 45%;
+    display: none;
+  }
 
-    .hero-title {
+  .login-wrapper {
-      font-size: 2.75rem;
+    min-height: 100vh;
-    }
+    height: 100%;
+  }
 
-    .hero-subtitle {
+  .login-panel {
-      font-size: 1.1rem;
+    flex: 1;
-    }
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .hero-content {
+  .login-header {
-      padding: 3rem 2rem;
+    flex-shrink: 0;
-    }
+  }
 
-    mifosx-footer {
+  .login-card-container {
-      padding-top: 1.5rem;
+    flex: 1;
-
+    display: flex;
-      ::ng-deep .footer-compact {
+    flex-direction: column;
-        .footer-info {
+    padding: 0;
-          font-size: 0.7rem;
+    width: 100%;
-        }
+    height: 100%;
-
-        .footer-copyright {
-          font-size: 0.8rem;
-        }
-      }
-    }
   }
 
   .login-card {
-    padding: 1.5rem 1rem;
+    flex: 1;
+    width: 100%;
+    max-width: 100%;
+    border-radius: 0;
+    padding: 1.5rem 2rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .logo-section {
+    flex-shrink: 0;
+  }
+
+  .form-section {
+    flex-shrink: 0;
+  }
+
+  .login-version-info {
+    margin-top: auto;
+  }
+
+  .login-footer {
+    flex-shrink: 0;
   }
 
   // Hide resources section on medium screens