fix(compare): keep the add-school sheet above the on-screen keyboard
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m6s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m31s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m6s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 11s
PR Checks / Build Frontend (no push) (pull_request) Successful in 47s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m31s
The bottom-sheet overlay was position:fixed inset:0, sized to the LAYOUT viewport, so when the mobile keyboard opened it kept full height: the sheet (anchored to the overlay's bottom) and the lower half of the dim backdrop sat behind the keyboard, hiding the search input and results. Track window.visualViewport (height + offsetTop) while the modal is open and pin the overlay to the visible region, so backdrop and sheet stay above the keyboard. Size the sheet against the overlay (max-height:100%, min-height:min(55vh,100%)) instead of vh, and drop the results list's own inner scroll on mobile so the sheet is a single scroll area. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
This commit is contained in:
@@ -155,6 +155,15 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* One scroll container on mobile: the modal content itself scrolls, so the
|
||||
results list must not add its own inner scroll (double scrollbars, and
|
||||
the input would be trapped above a short 400px window when the keyboard
|
||||
shrinks the sheet). */
|
||||
.results {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Compact stacked card: name + meta, then a full-width action so the tap
|
||||
target is obvious and the card doesn't waste vertical space. */
|
||||
.resultItem {
|
||||
|
||||
Reference in New Issue
Block a user