From 4eb96b03671271c5949dd127bc24acf45756df41 Mon Sep 17 00:00:00 2001
From: swdee <shanon@bokumail.com>
Date: Fri, 16 Jan 2026 23:31:21 +1300
Subject: [PATCH] shrink camera height on mobile so augmented information can
 been viewed onscreen

---
 assets/controllers/pages/barcode_scan_controller.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/controllers/pages/barcode_scan_controller.js b/assets/controllers/pages/barcode_scan_controller.js
index e12abce8..c8aeac80 100644
--- a/assets/controllers/pages/barcode_scan_controller.js
+++ b/assets/controllers/pages/barcode_scan_controller.js
@@ -36,6 +36,8 @@ export default class extends Controller {
 
         this.bindModeToggles();
 
+        const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
         //This function ensures, that the qrbox is 70% of the total viewport
         let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
             let minEdgePercentage = 0.7; // 70%
@@ -55,6 +57,8 @@ export default class extends Controller {
         this._scanner = new Html5QrcodeScanner(this.element.id, {
             fps: 10,
             qrbox: qrboxFunction,
+            // Key change: shrink preview height on mobile
+            ...(isMobile ? { aspectRatio: 1.0 } : {}),
             experimentalFeatures: {
                 //This option improves reading quality on android chrome
                 useBarCodeDetectorIfSupported: true,