From 1dcee60358e44da5353d4069fd1d1be5dc6c05c5 Mon Sep 17 00:00:00 2001
From: Michael Neuendorf <neuendorf@gonicus.de>
Date: Tue, 24 Mar 2020 20:16:30 +0100
Subject: [PATCH] Don't exceed the screen width with camera window

---
 public/css/grocy.css                       | 8 ++++++++
 public/viewjs/components/barcodescanner.js | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 68bc85ae..2be88364 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -259,6 +259,14 @@ input::-webkit-inner-spin-button {
 	color: inherit;
 }
 
+/* Barcodescanner Quagga */
+#barcodescanner-livestream video {
+	width: 100%;
+}
+#barcodescanner-livestream canvas {
+	width: 100%;
+}
+
 /* Third party component customizations - Bootstrap */
 
 /* Hide the form validation feedback icons introduced in Bootstrap 4.2.0 - a colored border is enough */
diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js
index 10a3cecd..ed7a8feb 100644
--- a/public/viewjs/components/barcodescanner.js
+++ b/public/viewjs/components/barcodescanner.js
@@ -28,8 +28,8 @@ Grocy.Components.BarcodeScanner.StartScanning = function()
 			type: "LiveStream",
 			target: document.querySelector("#barcodescanner-livestream"),
 			constraints: {
-				width: 436,
-				height: 327,
+				// width: 436,
+				// height: 327,
 				facingMode: "environment"
 			}
 		},
@@ -181,7 +181,7 @@ $(document).on("click", "#barcodescanner-start-button", function(e)
 				callback: function()
 				{
 					Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState;
-					
+
 					Quagga.CameraAccess.getActiveTrack().applyConstraints({ 
 						advanced: [
 							{