fix: Fixed scale and mouse handler

web/app/servers/[id]/console/page.tsx

@@ -15,7 +15,11 @@ export default function ServerConsolePage() {
     const serverId = params.id as string;
 
     const containerRef = useRef<HTMLDivElement>(null);
-    const connectionRef = useRef<{ disconnect: () => void; setScale: (scale: number) => void } | null>(null);
+    const connectionRef = useRef<{
+        disconnect: () => void;
+        setScale: (scale: number) => void;
+        resize: (width: number, height: number) => void;
+    } | null>(null);
 
     const [protocol, setProtocol] = useState<string>(searchParams.get("protocol") || "");
     const [keyId, setKeyId] = useState<string>("");
@@ -121,9 +125,18 @@ export default function ServerConsolePage() {
         setPending(null);
     }, [connected, pending]);
 
-    // Apply zoom changes live without reconnecting.
+    // Apply zoom live without reconnecting: resize the remote to a resolution
+    // that, once scaled to fit the container, yields the requested zoom. Higher
+    // zoom = fewer remote pixels rendered larger. Display always fits the
+    // container exactly, so no scrollbars appear.
     useEffect(() => {
-        connectionRef.current?.setScale(zoom / dprRef.current);
+        if (!connectionRef.current || !containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const dpr = dprRef.current;
+        const remoteW = Math.floor((rect.width * dpr) / zoom);
+        const remoteH = Math.floor((rect.height * dpr) / zoom);
+        connectionRef.current.resize(remoteW, remoteH);
+        connectionRef.current.setScale(zoom / dpr);
     }, [zoom]);
 
     function handleDisconnect() {
@@ -276,7 +289,7 @@ export default function ServerConsolePage() {
 
             <div
                 ref={containerRef}
-                className="min-h-[500px] flex-1 overflow-auto rounded-lg border border-border bg-black"
+                className="min-h-[500px] flex-1 overflow-hidden rounded-lg border border-border bg-black"
             />
         </div>
     );