diff --git a/webssh/static/css/app.css b/webssh/static/css/app.css index c70e438..a5b971a 100644 --- a/webssh/static/css/app.css +++ b/webssh/static/css/app.css @@ -11,6 +11,7 @@ --danger: #d65a4a; --danger-soft: #fff1ee; --shadow: 0 18px 48px rgba(21, 58, 58, 0.09); + --terminal-safe-bottom: 52px; } * { @@ -281,6 +282,11 @@ input[type="file"].form-control { min-height: 0; } +#terminal .xterm.fullscreen { + padding-bottom: var(--terminal-safe-bottom); + background: #0f1720; +} + #waiter { position: fixed; inset: 0; diff --git a/webssh/static/js/main.js b/webssh/static/js/main.js index e57ee50..3377750 100644 --- a/webssh/static/js/main.js +++ b/webssh/static/js/main.js @@ -300,6 +300,14 @@ jQuery(function($){ term.fitAddon.fit(); } + function terminal_safe_bottom() { + var value = window.getComputedStyle(document.documentElement) + .getPropertyValue('--terminal-safe-bottom'), + parsed = window.parseInt(value, 10); + + return parsed > 0 ? parsed : 0; + } + function current_geometry(term) { if (!style.width || !style.height) { @@ -310,8 +318,9 @@ jQuery(function($){ } } - var cols = parseInt(window.innerWidth / style.width, 10) - 1; - var rows = parseInt(window.innerHeight / style.height, 10); + 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)); return {'cols': cols, 'rows': rows}; }