diff --git a/webssh/static/css/app.css b/webssh/static/css/app.css index 30a3bb4..4d17c6b 100644 --- a/webssh/static/css/app.css +++ b/webssh/static/css/app.css @@ -282,13 +282,19 @@ input[type="file"].form-control { min-height: 0; } -#terminal .xterm.fullscreen { - bottom: var(--terminal-safe-bottom); - height: auto; - padding-bottom: 0; +#terminal.terminal-fullscreen { + position: fixed; + inset: 0 0 var(--terminal-safe-bottom) 0; + z-index: 255; + overflow: hidden; background: #0f1720; } +#terminal.terminal-fullscreen .xterm { + width: 100%; + height: 100%; +} + #waiter { position: fixed; inset: 0; diff --git a/webssh/static/js/main.js b/webssh/static/js/main.js index 3377750..df29786 100644 --- a/webssh/static/js/main.js +++ b/webssh/static/js/main.js @@ -296,8 +296,9 @@ jQuery(function($){ function toggle_fullscreen(term) { - $('#terminal .terminal').toggleClass('fullscreen'); + $('#terminal').toggleClass('terminal-fullscreen'); term.fitAddon.fit(); + resize_terminal(term); } function terminal_safe_bottom() { @@ -309,6 +310,16 @@ jQuery(function($){ } + function terminal_size() { + var terminal = document.getElementById('terminal'), + rect = terminal.getBoundingClientRect(), + width = rect.width || window.innerWidth, + height = rect.height || (window.innerHeight - terminal_safe_bottom()); + + return {'width': width, 'height': height}; + } + + function current_geometry(term) { if (!style.width || !style.height) { try { @@ -318,9 +329,9 @@ jQuery(function($){ } } - var height = window.innerHeight - terminal_safe_bottom(), - cols = Math.max(2, parseInt(window.innerWidth / style.width, 10) - 1), - rows = Math.max(1, parseInt(height / style.height, 10)); + var size = terminal_size(), + cols = Math.max(2, parseInt(size.width / style.width, 10) - 1), + rows = Math.max(1, parseInt(size.height / style.height, 10) - 1); return {'cols': cols, 'rows': rows}; }