/* Canvas positioning */ canvas.drawing, canvas.drawingBuffer { position: absolute; left: 0; top: 0; } /* Responsive Quagga scanner container */ #Interactive { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 10; /* Maintains consistent height:width ratio */ margin: 10px auto; border: 1px solid #ccc; overflow: hidden; } /* Ensure overlay canvas aligns correctly */ #Interactive canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /* Add padding to table cells */ #resultsTable th, #resultsTable td { padding-left: 1.5em; padding-right: 1.5em; } /* Hide columns for mobile view */ @media screen and (max-width: 600px) { table#resultsTable td.mobile-hide, table#resultsTable th.mobile-hide { display: none; } } /* Default hide columns marked as mobile-hide */ table#resultsTable td.mobile-hide, table#resultsTable th.mobile-hide { display: none; } /* ============================ */ /* Keep Quagga strictly inside #scanner */ #scanner { width: 100%; max-width: 640px; height: 300px; border: 1px solid #ccc; margin: 10px auto; background: #fafafa; position: relative; overflow: hidden; } /* Any Quagga-injected video/canvas must fit the box */ #scanner video, #scanner canvas, #scanner > video, #scanner > canvas, #scanner canvas.drawingBuffer { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; background: transparent !important; display: block; } /* If Quagga drops media on , neuter the full-screen effect and move via JS */ body > video, body > canvas, body > canvas.drawingBuffer { position: static !important; max-width: 0 !important; max-height: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; background: transparent !important; } /* Force any stray Quagga media on to be invisible */ body > video, body > canvas, body > canvas.drawingBuffer { position: static !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; background: transparent !important; }