Aman-Mittal opened a new issue, #482: URL: https://github.com/apache/fineract-backoffice-ui/issues/482
## What happens On a viewport shorter than roughly 620 CSS pixels, the login card's **Sign In** button renders below the fold — and the page cannot be scrolled, so the button is genuinely unreachable with a pointer. The only way in is to press <kbd>Enter</kbd> from a field, which a first-time user has no reason to try. Measured at **1280×560**: ``` submit button top: 578 bottom: 617 (viewport height: 560) documentElement scrollHeight: 560 clientHeight: 560 → not scrollable body scrollHeight: 706 → 146px of content clipped away ```  ## Why it cannot be scrolled `.login-page` in `src/app/features/login/login.component.ts` is `min-height: 100dvh` with the card vertically centred, so when the card is taller than the viewport it overflows top **and** bottom rather than growing the page. The overflow is then clipped rather than scrolled, because Ionic's global stylesheet sets: ```css body { overflow: hidden; } ``` Confirmed by walking the live stylesheets: ```js // rules matching html/body that set overflow [{ sel: "body.backdrop-no-scroll", overflow: "hidden", href: ".../styles.css" }, { sel: "body", overflow: "hidden", href: ".../styles.css" }] ``` The login screen is a plain `<div class="login-page">` rather than an `<ion-content>`, so it never gets the scroll container that Ionic's `overflow: hidden` on `body` assumes is there. Every other screen in the app sits inside the app shell, which provides its own scrolling area — login is the one route that does not. ## Who this affects - 1366×768 laptops with a browser toolbar and bookmarks bar (usable height often ~600px) - Any window the user has not maximised - Phones in landscape It is not a niche viewport — 1280×560 is an ordinary maximised window on a common laptop once browser chrome is subtracted. ## Suggested fix Give the login route its own scroll container instead of relying on the body, e.g. make `.login-page` `min-height: 100dvh; overflow-y: auto;` and switch the centring from a hard `align-items: center` to one that degrades to top-aligned when content exceeds the viewport (`justify-content: safe center`, or `margin: auto` on the card). Tightening the card's vertical padding helps but does not fix the unreachable case on its own. ## Environment Reproduced against a clean checkout of `main` (`a24a06ba`) served with `ng serve`, backend `sandbox.mifos.community`, Chrome. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
