sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

keyboard tweaks

Browse source
This commit is contained in:
Peter Steinberger 2025-06-27 02:02:19 +02:00
parent 27416a7ce3
commit b84e6faea2
1 changed files with 26 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/client/components/session-view.ts
View file

@ -723,12 +723,14 @@ export class SessionView extends LitElement {
if (this.showQuickKeys && this.isMobile) { if (this.showQuickKeys && this.isMobile) {
// Quick keys height (approximately 140px based on CSS) // Quick keys height (approximately 140px based on CSS)
const quickKeysHeight = 140; // Add 10px buffer to ensure content is visible above quick keys
const quickKeysHeight = 150;
heightReduction += quickKeysHeight; heightReduction += quickKeysHeight;
} }
if (this.keyboardHeight > 0) { if (this.keyboardHeight > 0) {
heightReduction += this.keyboardHeight; // Add small buffer for keyboard too
heightReduction += this.keyboardHeight + 10;
} }
// Calculate terminal container height // Calculate terminal container height
@ -744,24 +746,29 @@ export class SessionView extends LitElement {
`Terminal height updated: quickKeys=${this.showQuickKeys}, keyboardHeight=${this.keyboardHeight}, reduction=${heightReduction}px` `Terminal height updated: quickKeys=${this.showQuickKeys}, keyboardHeight=${this.keyboardHeight}, reduction=${heightReduction}px`
); );
// If terminal height changed, notify terminal to resize // Force immediate update to apply height change
if (heightReduction > 0) { this.requestUpdate();
// Request terminal to resize and scroll to cursor
// Always notify terminal to resize when there's a change
// Use requestAnimationFrame to ensure DOM has updated
requestAnimationFrame(() => {
const terminal = this.querySelector('vibe-terminal') as Terminal; const terminal = this.querySelector('vibe-terminal') as Terminal;
if (terminal) { if (terminal) {
// Trigger resize after DOM update
setTimeout(() => {
// Notify terminal of size change // Notify terminal of size change
const terminalElement = terminal as unknown as { fitTerminal?: () => void }; const terminalElement = terminal as unknown as { fitTerminal?: () => void };
if (typeof terminalElement.fitTerminal === 'function') { if (typeof terminalElement.fitTerminal === 'function') {
terminalElement.fitTerminal(); terminalElement.fitTerminal();
} }
// Scroll to bottom to keep cursor visible // If height was reduced, scroll to keep cursor visible
if (heightReduction > 0) {
// Small delay then scroll to bottom to keep cursor visible
setTimeout(() => {
terminal.scrollToBottom(); terminal.scrollToBottom();
}, 100); }, 50);
} }
} }
});
} }
refreshTerminalAfterMobileInput() { refreshTerminalAfterMobileInput() {
@ -842,11 +849,11 @@ export class SessionView extends LitElement {
<!-- Terminal Container --> <!-- Terminal Container -->
<div <div
class="flex-1 bg-black overflow-hidden min-h-0 relative ${ class="${this.terminalContainerHeight === '100%' ? 'flex-1' : ''} bg-black overflow-hidden min-h-0 relative ${
this.session?.status === 'exited' ? 'session-exited' : '' this.session?.status === 'exited' ? 'session-exited' : ''
}" }"
id="terminal-container" id="terminal-container"
style="height: ${this.terminalContainerHeight}; transition: height 0.3s ease-out;" style="${this.terminalContainerHeight !== '100%' ? `height: ${this.terminalContainerHeight}; flex: none; max-height: ${this.terminalContainerHeight};` : ''} transition: height 0.3s ease-out;"
> >
${ ${
this.loadingAnimationManager.isLoading() this.loadingAnimationManager.isLoading()
@ -873,6 +880,7 @@ export class SessionView extends LitElement {
.fitHorizontally=${false} .fitHorizontally=${false}
.maxCols=${this.terminalMaxCols} .maxCols=${this.terminalMaxCols}
.disableClick=${this.isMobile && this.useDirectKeyboard} .disableClick=${this.isMobile && this.useDirectKeyboard}
.hideScrollButton=${this.showQuickKeys}
class="w-full h-full p-0 m-0" class="w-full h-full p-0 m-0"
@click=${this.handleTerminalClick} @click=${this.handleTerminalClick}
></vibe-terminal> ></vibe-terminal>