fix(terminal) forward scroll event from vm to parent container. fixes #…

…700

Signed-off-by: David Edler <david.edler@canonical.com>

src/lib/spice/src/inputs.js

@@ -164,6 +164,8 @@ function handle_mousewheel(e)
         this.sc.inputs.send_msg(msg);
 
     e.preventDefault();
+
+    window.dispatchEvent(new CustomEvent("spice-wheel", { detail: { wheelEvent: e } }));
 }
 
 function handle_keydown(e)

src/lib/spice/src/resize.js

@@ -48,9 +48,9 @@ function resize_helper(sc)
 
     var height = window.innerHeight - wrapper.getBoundingClientRect().top;
 
-    /* leave a margin at the bottom when not in full screen */
+    /* leave a margin at the bottom (and reserve status bar height) when not in full screen */
     if (!isFullScreen) {
-        height = height - 20;
+        height = height - 65;
     }
 
     /* minimum height constraint */

src/pages/instances/InstanceGraphicConsole.tsx

@@ -16,6 +16,12 @@ declare global {
   }
 }
 
+interface SpiceWheelEvent extends CustomEvent {
+  detail: {
+    wheelEvent: WheelEvent;
+  };
+}
+
 interface Props {
   instance: LxdInstance;
   onMount: (handler: () => void) => void;
@@ -42,7 +48,7 @@ const InstanceGraphicConsole: FC<Props> = ({
   };
 
   const handleResize = () => {
-    updateMaxHeight("spice-wrapper", undefined, 10);
+    updateMaxHeight("spice-wrapper");
     SpiceHtml5.handle_resize();
   };
 
@@ -109,6 +115,17 @@ const InstanceGraphicConsole: FC<Props> = ({
   useEventListener("resize", handleResize);
   useEffect(handleResize, [notify.notification?.message]);
 
+  useEventListener("spice-wheel", (e) => {
+    if (!spiceRef.current?.parentElement || !Object.hasOwn(e, "detail")) {
+      return;
+    }
+    const wheelEvent = (e as SpiceWheelEvent).detail.wheelEvent;
+    spiceRef.current.parentElement.scrollBy(
+      wheelEvent.deltaX,
+      wheelEvent.deltaY,
+    );
+  });
+
   useEffect(() => {
     notify.clear();
     const websocketPromise = openVgaConsole();