Measure terminal from fullscreen container

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;

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};
   }