make VNC display responsive (even if it's borderline impossible to use)

components/VNC/VNC.module.css

@@ -1,5 +1,11 @@
 .container {
-  padding: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5em 0;
+  width: 100%;
+  min-height: 400px;
+  box-sizing: content-box;
 
   /* specific retro wallpaper tile is set randomly by JS onload */
   background-repeat: repeat;
@@ -7,15 +13,12 @@
 }
 
 .display {
-  display: block;
+  height: 600px;
-  margin: auto;
+  width: 100%;
   max-width: 800px;
-  max-height: 600px;
 
   /* fix fuzziness: https://stackoverflow.com/a/13492784 */
   image-rendering: optimizeSpeed;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: -o-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
@@ -31,12 +34,10 @@
 }
 
 .cmd {
-  display: block;
+  width: 100%;
-  margin: auto;
+  max-width: 700px;
-  width: 700px;
+  min-height: 400px;
-  height: 400px;
+  padding: 1em;
-  padding: 12px;
-  z-index: -100;
 
   background-color: #000000;
   color: #cccccc;

components/VNC/VNC.tsx

@@ -59,6 +59,8 @@ const VNC = ({ className }: Props) => {
     rfbRef.current = new RFB(screenRef.current, WEBSOCKETS_SERVER, {
       wsProtocols: ["binary", "base64"],
     });
+    // scale screen to make it kinda "responsive"
+    rfbRef.current.scaleViewport = true;
 
     // this is the one and only time we're spinning up a VM (hopefully)
     setLoaded(true);
@@ -69,6 +71,8 @@ const VNC = ({ className }: Props) => {
 
       // hide the console when VM connects
       consoleRef.current.style.display = "none";
+      // ...and show the screen
+      screenRef.current.style.display = "block";
     });
 
     // VM disconnected
@@ -77,6 +81,7 @@ const VNC = ({ className }: Props) => {
 
       // make the console reappear now that the VM has gone poof for whatever reason (doesn't really matter)
       try {
+        screenRef.current.style.display = "none";
         consoleRef.current.style.display = "block";
         statusRef.current.textContent =
           "Oh dear, it looks like something's gone very wrong. Sorry about that.\n\nPress the Any key or refresh the page to continue.";
@@ -93,7 +98,7 @@ const VNC = ({ className }: Props) => {
       className={classNames(styles.container, className)}
       style={{
         // set a random retro wallpaper tile for the content area
-        background: `url('/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png')`,
+        backgroundImage: `url(/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png)`,
       }}
     >
       <div ref={consoleRef} className={classNames("monospace", styles.cmd)}>
@@ -101,7 +106,7 @@ const VNC = ({ className }: Props) => {
         <span className={styles.blink}>_</span>
       </div>
 
-      <div ref={screenRef} className={styles.display} />
+      <div ref={screenRef} className={styles.display} style={{ display: "none" }} />
     </div>
   );
 };