/* ============================================================================= admin-modal-responsive.css Shared, MOBILE-ONLY behaviour for the admin pop-up modal. Which modal: the one built by Areas/HR/Views/Shared/_AdminQuickLayout.cshtml, injected into #PopUpHolder by GetPopCreate() in wwwroot/Main.js, and shown with $("#PopUpModal").modal("show"). That is a Bootstrap 3 modal and it is used by 25+ Create screens across HR and Accounting, so this file is deliberately SHARED rather than scoped to one screen. WHY IT IS NEEDED - two separate defects, both measured live at 375x667 on /hr/employee/Edit before this file existed: 1. THE PAGE BEHIND THE MODAL KEEPS SCROLLING. Bootstrap 3 locks the page with ".modal-open { overflow: hidden }". The Metronic theme overrides that in global/css/components-rtl.min.css with ".modal-open { overflow-y: auto !important; }" - an intentional desktop choice, but on a phone it means a touch drag inside the modal scrolls the page underneath instead. Computed body overflow while a modal was open read "hidden auto", i.e. the lock was not in effect. Beating an !important needs another !important at equal or higher specificity - later source order alone does NOT beat it. Hence "body.modal-open" (0,1,1) plus !important here. 2. A TALL MODAL RUNS OFF THE BOTTOM OF THE SCREEN. .modal-dialog has margin:10px and NO max-height, so it takes its natural height. Measured on a 667px-tall viewport the dialog was 780px tall and ended at y=790 - meaning the .modal-footer, which carries Save and Close, sat entirely below the fold and could not be reached. With the rules below the same dialog measures 647px, ends at 657, and its .modal-body becomes the scroller while the header and footer stay pinned. NOTE ON POSITION: the modal itself was never mispositioned. #PopUpHolder is a direct child of (_RootLayout.cshtml), the modal computes position:fixed with offsetParent null, and it correctly stays at the top of the viewport even when the page is scrolled to y=900. There is no transformed ancestor to work around, so nothing here touches positioning. SCOPE: every rule lives inside max-width:991px. Desktop is untouched. LOAD ORDER: appended in _RootLayout.cshtml and _StartupRootLayout.cshtml ABOVE the NewDesign calls, because AppendCssFileParts PREPENDS - what is written first renders last. Bump the ?v= at BOTH call sites when editing this file, or one of the two layouts serves a stale copy. Kamal - 21/09/2026 ============================================================================= */ @media (max-width: 991px) { /* 1. Restore the page lock the theme's !important removed. */ body.modal-open { overflow: hidden !important; } /* Stop a drag that reaches the end of the modal from chaining to the page. */ .modal { overscroll-behavior: contain; } /* 2. Cap the dialog to the screen and let the body scroll inside it. */ .modal-dialog { margin: 10px; max-height: calc(100vh - 20px); display: flex; flex-direction: column; } /* 100vh on mobile is the LARGE viewport - it ignores the browser's own URL bar, so the footer can still be clipped while that bar is showing. dvh is the visible height and changes with it. Guarded, so a browser without dvh simply keeps the calc above. */ @supports (height: 100dvh) { .modal-dialog { max-height: calc(100dvh - 20px); } } .modal-content { display: flex; flex-direction: column; min-height: 0; max-height: 100%; } /* min-height:0 is required: a flex item's default min-height is auto, which refuses to shrink below its content and would let the body push the footer back off screen no matter what max-height the dialog has. */ .modal-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Old: only the header and the footer were pinned, and every other direct child of .modal-content was left on the flex default of "0 1 auto". That default LOOKS like it can shrink but cannot: a flex item's min-height is auto, i.e. its own content height, so a tall stray child refuses to give up a single pixel and the shrinking all falls on .modal-body (the only item here with min-height:0). Once the body has collapsed to zero the rest simply overflows .modal-content and the footer - Save and Cancel - leaves the screen again, which is the exact defect the max-height above exists to prevent. Kamal - 21/09/2026 */ /* .modal-header, .modal-footer { flex: 0 0 auto; } */ /* New: the same pinning, plus a rule for the stray children. THIS IS NOT HYPOTHETICAL. The tickets dialog on the Employee screen has one: #ticketModalError in Areas/HR/Views/Employee/_CreateOrUpdateTicket.cshtml is a direct child of .modal-content, sitting BETWEEN the header and the body rather than inside the body. Measured live at 667x375 with a long message: the error bar took 309px of a 355px dialog, .modal-body collapsed from 249px to 30px, and the footer ended at y=505 on a 375px-tall viewport - unreachable. With the rule below the bar scrolls inside itself instead of pushing, and the footer stays in view. min-height:0 is what actually unlocks the shrinking; overflow-y:auto is what keeps the shrunk content readable rather than clipped. Deliberately NOT "flex: 0 0 auto" - pinning a 309px bar would have starved the body instead and moved the problem rather than fixing it. .modal-content is NOT given overflow:hidden as a backstop on purpose: it would hide whatever still escaped, and a silently clipped footer is worse to diagnose than a visible one. Kamal - 21/09/2026 */ .modal-content > .modal-header, .modal-content > .modal-footer { flex: 0 0 auto; } .modal-content > *:not(.modal-header):not(.modal-footer):not(.modal-body) { flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } }