From 1d50e2cead48132376af0f26676258983065d052 Mon Sep 17 00:00:00 2001
From: wmetcalf <wmetcalf@users.noreply.github.com>
Date: Fri, 27 Mar 2026 00:35:13 +0000
Subject: [PATCH 1/2] Scale guacamole VNC display to fit browser window

Make the VNC display automatically scale to fill the available browser
viewport without scrollbars. Adjusts mouse coordinates by the scale
factor so the cursor aligns correctly with the guest display.
---
 web/static/css/guac-main.css | 19 ++++++++++++++++---
 web/static/js/guac-main.js   | 30 ++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/web/static/css/guac-main.css b/web/static/css/guac-main.css
index 4b7a016ce11..5896e3c4d32 100644
--- a/web/static/css/guac-main.css
+++ b/web/static/css/guac-main.css
@@ -1,12 +1,25 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.guaconsole {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
 #container {
     position: relative;
-    width: 100%;
-    height: 20em;
+    flex: 1;
+    overflow: hidden;
 }
 
 #terminal {
     height: 100%;
-    width: 100%
+    width: 100%;
 }
 
 .dialog,
diff --git a/web/static/js/guac-main.js b/web/static/js/guac-main.js
index 7a7319c3a5c..537f8468566 100644
--- a/web/static/js/guac-main.js
+++ b/web/static/js/guac-main.js
@@ -27,6 +27,33 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
         /* Show the terminal.  */
         $('#terminal').append(terminal_element);
 
+        /* Scale display to fit the browser window. */
+        var scaleDisplay = function() {
+            var display = terminal_client.getDisplay();
+            var displayWidth = display.getWidth();
+            var displayHeight = display.getHeight();
+            if (!displayWidth || !displayHeight) return;
+
+            var container = document.getElementById('container');
+            var containerWidth = container.offsetWidth;
+            var containerHeight = container.offsetHeight;
+            if (!containerWidth || !containerHeight) return;
+
+            var scale = Math.min(
+                containerWidth / displayWidth,
+                containerHeight / displayHeight
+            );
+            display.scale(scale);
+        };
+
+        /* Re-scale when the display size changes (initial connect). */
+        terminal_client.getDisplay().onresize = function() {
+            scaleDisplay();
+        };
+
+        /* Re-scale on browser window resize. */
+        window.addEventListener('resize', scaleDisplay);
+
         /* Disconnect on tab close. */
         window.onunload = function() {
             terminal_client.disconnect();
@@ -38,6 +65,9 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
         mouse.onmousedown =
         mouse.onmouseup   =
         mouse.onmousemove = function(mouseState) {
+            var scale = terminal_client.getDisplay().getScale();
+            mouseState.x = mouseState.x / scale;
+            mouseState.y = mouseState.y / scale;
             terminal_client.sendMouseState(mouseState);
         };
 

From 168f8085e71c2502a19ec9d65fa0486a86857ac8 Mon Sep 17 00:00:00 2001
From: wmetcalf <wmetcalf@users.noreply.github.com>
Date: Fri, 27 Mar 2026 02:01:02 +0000
Subject: [PATCH 2/2] Address review: debounce resize handler and use built-in
 scale parameter

Use sendMouseState's built-in scale parameter instead of mutating the
mouse's internal state object. Debounce the window resize listener to
avoid excessive recalculations.
---
 web/static/js/guac-main.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/static/js/guac-main.js b/web/static/js/guac-main.js
index 537f8468566..b4e2d27ea51 100644
--- a/web/static/js/guac-main.js
+++ b/web/static/js/guac-main.js
@@ -51,8 +51,12 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
             scaleDisplay();
         };
 
-        /* Re-scale on browser window resize. */
-        window.addEventListener('resize', scaleDisplay);
+        /* Re-scale on browser window resize (debounced). */
+        var resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(scaleDisplay, 100);
+        });
 
         /* Disconnect on tab close. */
         window.onunload = function() {
@@ -65,10 +69,7 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) {
         mouse.onmousedown =
         mouse.onmouseup   =
         mouse.onmousemove = function(mouseState) {
-            var scale = terminal_client.getDisplay().getScale();
-            mouseState.x = mouseState.x / scale;
-            mouseState.y = mouseState.y / scale;
-            terminal_client.sendMouseState(mouseState);
+            terminal_client.sendMouseState(mouseState, true);
         };
 
         /* Keyboard handling.  */