.auth-bg { background-image: url('assets/media/images/bg-10.png'); /* The host is `flex h-full` (fixed to the viewport height) for the dashboard shell, which has its own inner scroller. The EmptyLayout auth pages have none, so a tall form (register on a phone) could not scroll. Make the auth background its own vertical scroll container with a definite height, overriding Tailwind's min-h-screen (min-height:100vh) so the box is fixed and scrollable rather than growing past the viewport. `safe center` keeps a card taller than the viewport reachable from the top instead of clipping it (the classic flexbox align-items:center overflow bug). */ height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; /* mobile-safe: excludes the browser chrome */ min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: safe center; justify-content: safe center; } .dark .auth-bg { background-image: url('assets/media/images/bg-10-dark.png'); }