Styling around emulator

Author: stever

apps/web/public/style.css

@@ -142,9 +142,19 @@ code {
 }
 
 .desktop .CodeMirror {
-    height: calc(100vh - 177px) !important;
+    /* Match the fixed-size emulator frame on the right:
+       screen (zoom 2 = 480px) + keyboard (256px) + 2px frame border = 738px. */
+    box-sizing: border-box;
+    height: 738px !important;
+    max-height: 738px !important;
+    border: 1px solid #5B5B5B;
+    border-radius: 5px;
+}
+
+.desktop .emulator-frame {
     border: 1px solid #5B5B5B;
     border-radius: 5px;
+    overflow: hidden;
 }
 
 .mobile .CodeMirror {

apps/web/src/components/Emulator.jsx

@@ -21,9 +21,9 @@ export function Emulator(props) {
     }, []);
 
     return (
-        <>
+        <div className="emulator-frame">
             <div id="jsspeccy-screen"/>
             <Keyboard width={width}/>
-        </>
+        </div>
     )
 }

apps/web/src/components/Keyboard.jsx

@@ -17,7 +17,8 @@ export function Keyboard(props) {
     }, []);
 
     let style = {
-        imageRendering: 'auto'
+        imageRendering: 'auto',
+        display: 'block'
     };
 
     if (!isMobile) {