diff --git a/examples/web/react/app.css b/examples/web/react/app.css
index 26a7e3d79f7e0f5897a88081f9226b1b3fd3ded1..f666378e582f6fccdc584adcaefd5259f463b1de 100644
--- a/examples/web/react/app.css
+++ b/examples/web/react/app.css
@@ -3,3 +3,13 @@
     font-family: VT323, Roboto, Open Sans, Arial, Helvetica, sans-serif;
     margin: 0px 0px 0px 0px;
 }
+
+.app .display-container {
+    margin-top: 78px;
+}
+
+@media only screen and (max-width: 1120px) {
+    .app .display-container {
+        margin-top: 0px;
+    }
+}
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 45e7b722107a10ca50c9027ac129db8a2a0bd534..409f68206116181059d54d95880d810df241e24f 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -334,7 +334,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
             </Footer>
             <PanelSplit
                 left={
-                    <div style={{ marginTop: 78 }}>
+                    <div className="display-container">
                         <Display
                             fullscreen={fullscreen}
                             onDrawHandler={onDrawHandler}
diff --git a/examples/web/react/components/button-container/button-container.css b/examples/web/react/components/button-container/button-container.css
index eb4dc7f3a15f29db9fcb8a9d7ab5618353281f65..6bf22e660471139564a60639b8e52b7fe4b33da3 100644
--- a/examples/web/react/components/button-container/button-container.css
+++ b/examples/web/react/components/button-container/button-container.css
@@ -1,5 +1,10 @@
+.button-container {
+    margin-bottom: -12px;
+}
+
 .button-container > * {
     margin-right: 8px;
+    margin-bottom: 12px;
 }
 
 .button-container > *:last-child {
diff --git a/examples/web/react/components/display/display.tsx b/examples/web/react/components/display/display.tsx
index 818ed142d4dd5dbbab06f7b4607398716bc6d9f3..2ab8bdff972f736ad05e10c693dce32ccdb4a7eb 100644
--- a/examples/web/react/components/display/display.tsx
+++ b/examples/web/react/components/display/display.tsx
@@ -77,13 +77,16 @@ export const Display: FC<DisplayProps> = ({
     });
 
     useEffect(() => {
-        if (canvasRef.current && !canvasContentsRef.current) {
+        if (canvasRef.current) {
             canvasContentsRef.current = initCanvas(
                 options.logicWidth,
                 options.logicHeight,
                 canvasRef.current
             );
         }
+    }, [canvasRef, options.scale]);
+
+    useEffect(() => {
         if (fullscreen) {
             resizeRef.current();
             document.getElementsByTagName("body")[0].style.overflow = "hidden";
@@ -96,7 +99,7 @@ export const Display: FC<DisplayProps> = ({
                 .style.removeProperty("overflow");
             window.removeEventListener("resize", resizeRef.current);
         }
-    }, [canvasRef, fullscreen]);
+    }, [fullscreen]);
 
     if (onDrawHandler) {
         onDrawHandler((pixels, format) => {
@@ -161,6 +164,9 @@ const initCanvas = (
     );
     const videoBuffer = new DataView(imageData.data.buffer);
 
+    // initializes the visual canvas (where data is going to be written)
+    // with, resetting the transform vector to the identity and re-calculating
+    // the scale of the drawing properly
     const canvasCtx = canvas.getContext("2d")!;
     canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
     canvasCtx.scale(