From 0ff28f5c59fbce87d655c0aeb5936db3f4bd88a7 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Tue, 10 Mar 2026 13:32:27 +0100
Subject: [PATCH] Fix login and register page cutoff

---
 resources/css/app.css                   | 11 +++++++++--
 resources/views/auth/login.blade.php    | 16 ++++++++--------
 resources/views/auth/register.blade.php | 16 ++++++++--------
 resources/views/layouts/admin.blade.php |  4 ++--
 resources/views/layouts/main.blade.php  |  4 ++--
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 3b66cc4e1..9796ef6ca 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -152,9 +152,16 @@
     display: none !important;
 }
 
-/* Fixed layout - ensure html and body have proper height constraints */
-html, body {
+/* Default document flow - public/guest pages need vertical scrolling */
+html,
+body {
     height: 100%;
+    overflow-x: hidden;
+}
+
+/* App shells keep a fixed viewport and scroll inside their content panels */
+html.app-shell,
+body.app-shell {
     overflow: hidden;
 }
 
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 3c0e884ec..a7a8dd608 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,16 +1,16 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
+<div class="min-h-dvh flex items-start justify-center bg-gray-100 dark:bg-gray-900 px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
+    <div class="w-full max-w-md space-y-6 sm:space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
-            <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
-                    <i class="fas fa-file-download text-3xl text-white"></i>
+            <a href="{{ url('/') }}" class="mb-3 inline-flex items-center justify-center sm:mb-4">
+                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 shadow-lg dark:bg-gray-700 sm:h-16 sm:w-16">
+                    <i class="fas fa-file-download text-2xl text-white sm:text-3xl"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-white">
+            <h2 class="mt-3 text-3xl font-extrabold text-gray-900 dark:text-white sm:mt-4 sm:text-4xl">
                 {{ config('app.name') }}
             </h2>
             <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
@@ -20,7 +20,7 @@
 
         <!-- Login Card -->
         <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
-            <div class="px-8 py-6">
+            <div class="px-5 py-5 sm:px-8 sm:py-6">
                 <!-- Session Messages -->
                 @if(session('message'))
                     <div class="mb-4 p-4 rounded-lg {{ session('message_type') == 'success' ? 'bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700' : (session('message_type') == 'danger' ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700' : 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700') }}">
@@ -150,7 +150,7 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-gray-700 dark:bg-gray-900 sm:px-8">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <div class="flex flex-col sm:flex-row gap-3 items-center">
                         @if(Route::has('register'))
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index dc7dba4d6..156881b9b 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -1,16 +1,16 @@
 @extends('layouts.guest')
 
 @section('content')
-<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
+<div class="min-h-dvh flex items-start justify-center bg-gray-100 dark:bg-gray-900 px-4 py-6 sm:px-6 sm:py-10 lg:px-8">
+    <div class="w-full max-w-md space-y-6 sm:space-y-8">
         <!-- Logo and Title -->
         <div class="text-center">
-            <a href="{{ url('/') }}" class="inline-flex items-center justify-center mb-4">
-                <div class="w-16 h-16 bg-blue-600 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
-                    <i class="fas fa-file-download text-3xl text-white"></i>
+            <a href="{{ url('/') }}" class="mb-3 inline-flex items-center justify-center sm:mb-4">
+                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 shadow-lg dark:bg-gray-700 sm:h-16 sm:w-16">
+                    <i class="fas fa-file-download text-2xl text-white sm:text-3xl"></i>
                 </div>
             </a>
-            <h2 class="mt-4 text-4xl font-extrabold text-gray-900 dark:text-white">
+            <h2 class="mt-3 text-3xl font-extrabold text-gray-900 dark:text-white sm:mt-4 sm:text-4xl">
                 {{ config('app.name') }}
             </h2>
             <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
@@ -20,7 +20,7 @@
 
         <!-- Register Card -->
         <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
-            <div class="px-8 py-6">
+            <div class="px-5 py-5 sm:px-8 sm:py-6">
                 <!-- Registration Status Error Message -->
                 @if(!empty($error) && $showregister == 0)
                     <div class="p-6 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700">
@@ -212,7 +212,7 @@
             </div>
 
             <!-- Card Footer -->
-            <div class="px-8 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+            <div class="border-t border-gray-200 bg-gray-50 px-5 py-4 dark:border-gray-700 dark:bg-gray-900 sm:px-8">
                 <div class="flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
                     <a href="{{ route('login') }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 font-medium transition">
                         <i class="fas fa-sign-in-alt mr-1"></i> Already have an account? Sign in
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index 0c7b7f648..78d5cdf13 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="app-shell">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
@@ -26,7 +26,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
 </head>
-<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased">
+<body class="app-shell bg-gray-100 dark:bg-gray-900 font-sans antialiased">
     <div class="h-screen flex">
         <!-- Admin Sidebar -->
         <aside id="sidebar" class="hidden md:flex md:flex-col w-64 bg-gray-900 dark:bg-gray-950 text-white shrink-0 h-full overflow-y-auto">
diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
index 0e38f320a..f1be43028 100644
--- a/resources/views/layouts/main.blade.php
+++ b/resources/views/layouts/main.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="app-shell">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
@@ -31,7 +31,7 @@
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('styles')
 </head>
-<body class="bg-gray-50 dark:bg-gray-900 font-sans antialiased">
+<body class="app-shell bg-gray-50 dark:bg-gray-900 font-sans antialiased">
     <div class="h-screen flex">
         <!-- Sidebar -->
         @auth