Fix login and register page cutoff

This commit is contained in:
DariusIII
2026-03-10 13:32:27 +01:00
parent a87a764f02
commit 0ff28f5c59
5 changed files with 29 additions and 22 deletions
+9 -2
View File
@@ -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;
}
+8 -8
View File
@@ -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'))
+8 -8
View File
@@ -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
+2 -2
View File
@@ -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">
+2 -2
View File
@@ -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