root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(terminal): anchor header to top when mobile keyboard is open

Browse Source 
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:
gsxdsm
2026-04-26 11:43:43 -07:00
parent b765eec11c
commit 02fffa71b3
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/dashboard/app/components/TerminalModal.css
View File

@@ -726,9 +726,11 @@
/* === Terminal Modal Mobile Responsive === */ /* === Terminal Modal Mobile Responsive === */
@media (max-width: 768px) { @media (max-width: 768px) {
.terminal-modal { .modal.terminal-modal {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-height: 100vh;
min-height: 100dvh;
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
max-height: 100vh; max-height: 100vh;
@@ -884,6 +886,14 @@
overflow: hidden; 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 button: touch target on mobile */
.terminal-tab-close { .terminal-tab-close {
min-width: 36px; min-width: 36px;