diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 7e4aa7406bdf4153e68353a55c8735c544899ee4..b20c6b7a2a5b971b02b3051801fd6d05a15b11b5 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -422,9 +422,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             }
         
             #canvas {
-                width: 100%;
+                /* width: 100%; */
                 margin-top: 2rem;
-                max-height: 100%;
+                max-height: calc(100vh - 100px);
+                max-width: 100%;
             }
         
             .output {