fix(mobile): terminal and layout fixes for touch devices

Mobile-focused fixes for the web UI: keyboard-accessory layout and
overlap, native input visibility above the keyboard, CJK input handling,
terminal touch scrolling, tab-menu tap targets, mic-recording glow
containment, and mobile resize/keyboard-state handling on tab switch,
plus mobile visual-regression test coverage and snapshots.

Co-Authored-By: Saqeb Akhter <saqeb.akhter@gmail.com>
This commit is contained in:
Aamer Akhter
2026-06-10 03:47:26 +02:00
committed by arkon
co-authored by Saqeb Akhter
parent c29475ed10
commit 02fa3f30f5
39 changed files with 1322 additions and 67 deletions
+30 -3
View File
@@ -107,11 +107,11 @@ textarea:focus-visible {
caret-color: transparent !important;
}
.touch-device .xterm .xterm-helper-textarea {
left: 0 !important;
top: 0 !important;
left: var(--xterm-helper-left, 0px) !important;
top: var(--xterm-helper-top, 0px) !important;
width: 1px !important;
height: 1px !important;
z-index: -1 !important;
z-index: 0 !important;
font-size: 16px !important; /* prevent iOS auto-zoom on focus */
}
@@ -8674,6 +8674,33 @@ kbd {
font-size: 12px;
}
.touch-device #cjkInput.cjk-input-visible {
position: fixed;
left: var(--safe-area-left);
right: var(--safe-area-right);
bottom: calc(var(--safe-area-bottom) + 40px);
z-index: 52;
display: block;
min-height: 44px;
max-height: 96px;
border: 1px solid rgba(80, 120, 190, 0.55);
border-left: none;
border-right: none;
background: #101827;
color: #f3f4f6;
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
transition: transform 0.15s ease-out;
will-change: transform;
}
.touch-device.keyboard-visible #cjkInput.cjk-input-visible {
bottom: calc(var(--safe-area-bottom) + 84px);
}
body.touch-device.cjk-input-visible .main {
padding-bottom: calc(84px + var(--safe-area-bottom));
}
/* ═══════════════════════════════════════════════════════════════
Orchestrator Panel
═══════════════════════════════════════════════════════════════ */