fix(terminal): anchor header to top when mobile keyboard is open
When the soft keyboard opens on mobile, the overlay's align-items:center was vertically centering the shrunken modal, pushing the header/tabs out of view. Add a rule to switch to align-items:flex-start when --keyboard-overlap is detected.
This commit is contained in:
@@ -726,9 +726,11 @@
|
||||
|
||||
/* === Terminal Modal Mobile Responsive === */
|
||||
@media (max-width: 768px) {
|
||||
.terminal-modal {
|
||||
.modal.terminal-modal {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: 100vh;
|
||||
@@ -884,6 +886,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Anchor the overlay to the top when the keyboard is open so the header
|
||||
stays visible. Without this, align-items:center (from the non-keyboard
|
||||
modal-overlay:has rule) vertically centers the shrunken modal and pushes
|
||||
the top area out of the visible viewport. */
|
||||
.modal-overlay:has(.terminal-modal[style*="--keyboard-overlap"]) {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
/* Terminal tab close button: touch target on mobile */
|
||||
.terminal-tab-close {
|
||||
min-width: 36px;
|
||||
|
||||
Reference in New Issue
Block a user