diff --git a/app/src-tauri/src/web_terminal/terminal.html b/app/src-tauri/src/web_terminal/terminal.html index f7982ae..b972d53 100644 --- a/app/src-tauri/src/web_terminal/terminal.html +++ b/app/src-tauri/src/web_terminal/terminal.html @@ -156,6 +156,69 @@ } .terminal-container.active { display: block; } + /* ── Input Bar (mobile/tablet) ──────────── */ + .input-bar { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 8px; + background: var(--bg-secondary); + border-top: 1px solid var(--border); + flex-shrink: 0; + } + + .input-bar input { + flex: 1; + min-width: 0; + padding: 8px 10px; + font-size: 16px; /* prevents iOS zoom on focus */ + font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace; + background: var(--bg-primary); + color: var(--text-primary); + border: 1px solid var(--border); + border-radius: 6px; + outline: none; + -webkit-appearance: none; + } + .input-bar input:focus { border-color: var(--accent); } + + .input-bar .key-btn { + padding: 8px 10px; + font-size: 11px; + font-weight: 600; + min-width: 40px; + min-height: 36px; + border-radius: 6px; + white-space: nowrap; + } + + /* ── Scroll-to-bottom FAB ──────────────── */ + .scroll-bottom-btn { + position: absolute; + bottom: 12px; + right: 16px; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--accent); + color: var(--bg-primary); + border: none; + font-size: 18px; + font-weight: bold; + display: none; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); + z-index: 10; + padding: 0; + min-width: unset; + min-height: unset; + line-height: 1; + } + .scroll-bottom-btn:hover { background: var(--accent-hover); } + .scroll-bottom-btn.visible { display: flex; } + /* ── Empty State ─────────────────────────── */ .empty-state { display: flex; @@ -201,6 +264,17 @@