login display fix now with scrolling

This commit is contained in:
Mark Gregory
2026-09-16 09:58:30 +01:00
parent ae7e5f75a1
commit 3863210146
2 changed files with 57 additions and 14 deletions
+25
View File
@@ -1696,3 +1696,28 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
color: rgb(191 219 254);
}
}
/* Authentication pages use normal document scrolling. The application shell
intentionally locks html/body scrolling, so auth must explicitly opt out. */
html.auth-page,
html.auth-page body {
width: 100% !important;
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto !important;
}
html.auth-page body {
position: static !important;
inset: auto !important;
min-height: 100vh !important;
}
@supports (min-height: 100dvh) {
html.auth-page body,
html.auth-page .wms-auth-page {
min-height: 100dvh !important;
}
}
+32 -14
View File
@@ -1,26 +1,44 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark auth-page">
<head>
@include('partials.head')
<style>
html.auth-page,
html.auth-page body {
width: 100% !important;
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto !important;
}
html.auth-page body {
position: static !important;
inset: auto !important;
min-height: 100vh !important;
min-height: 100dvh !important;
}
.wms-auth-page {
width: 100%;
min-height: 100vh;
min-height: 100dvh;
overflow: visible;
}
</style>
</head>
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
<body class="bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
<div data-dusk="page-ready" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);"
aria-hidden="true"></div>
<div class="bg-background flex min-h-svh flex-col items-center overflow-x-hidden overflow-y-auto px-6 py-8 md:px-10 md:py-10">
<div class="my-auto flex w-full max-w-md flex-col gap-2">
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
</span>
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
</a>
<div class="flex flex-col gap-6">
{{ $slot }}
</div>
<main class="wms-auth-page flex flex-col items-center px-6 py-8 md:px-10 md:py-10">
<div class="flex w-full max-w-md flex-col gap-6">
{{ $slot }}
</div>
</div>
</main>
@persist('toast')
<flux:toast.group>