Add scrollbars to full-size VNC view

- Add CSS class .vnc-container.full-size with overflow: auto to show scrollbars
- Modify toggleZoom() function to toggle the full-size CSS class on the container
- When zoom button is active (full-size mode), scrollbars appear for navigation
- Maintains scaled view (no scrollbars) when zoom button is inactive
parent f23ff750
...@@ -63,6 +63,9 @@ ...@@ -63,6 +63,9 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.vnc-container.full-size {
overflow: auto;
}
/* GNOME-like window decorations */ /* GNOME-like window decorations */
.vnc-window { .vnc-window {
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -281,12 +284,14 @@ function toggleZoom() { ...@@ -281,12 +284,14 @@ function toggleZoom() {
const zoomBtn = document.getElementById('zoomBtn'); const zoomBtn = document.getElementById('zoomBtn');
const zoomIcon = zoomBtn.querySelector('i'); const zoomIcon = zoomBtn.querySelector('i');
const vncContainer = document.getElementById('vnc');
if (zoomBtn.classList.contains('active')) { if (zoomBtn.classList.contains('active')) {
// Switch to scaled view (fit to window) // Switch to scaled view (fit to window)
zoomBtn.classList.remove('active'); zoomBtn.classList.remove('active');
zoomBtn.title = 'Toggle Zoom (Scale/Fit)'; zoomBtn.title = 'Toggle Zoom (Scale/Fit)';
zoomIcon.className = 'fas fa-search-plus'; zoomIcon.className = 'fas fa-search-plus';
vncContainer.classList.remove('full-size');
// Enable scaling, disable clipping // Enable scaling, disable clipping
rfb.scaleViewport = true; rfb.scaleViewport = true;
...@@ -298,6 +303,7 @@ function toggleZoom() { ...@@ -298,6 +303,7 @@ function toggleZoom() {
zoomBtn.classList.add('active'); zoomBtn.classList.add('active');
zoomBtn.title = 'Toggle Zoom (Actual Size)'; zoomBtn.title = 'Toggle Zoom (Actual Size)';
zoomIcon.className = 'fas fa-search-minus'; zoomIcon.className = 'fas fa-search-minus';
vncContainer.classList.add('full-size');
// Disable scaling, enable clipping // Disable scaling, enable clipping
rfb.scaleViewport = false; rfb.scaleViewport = false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment