From 29c6777a03d61a6d99927fc727038d4e94996745 Mon Sep 17 00:00:00 2001
From: MarcZierle <online@marczierle.com>
Date: Fri, 21 Jan 2022 13:32:02 +0100
Subject: [PATCH] fix camera canvas size

---
 src/views/CameraCapture.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/views/CameraCapture.vue b/src/views/CameraCapture.vue
index d8c506c..abac1d8 100644
--- a/src/views/CameraCapture.vue
+++ b/src/views/CameraCapture.vue
@@ -142,7 +142,7 @@ export default {
 	},
 	computed: {
 		selected_group_label() {
-			if (this.selected_group !== null) {
+			if (this.selected_group !== null && this.groups.length > 0) {
 				return this.groups.filter(group => group.value === this.selected_group)[0].label
 			}
 			return ''
@@ -201,9 +201,10 @@ export default {
 				this.stream.height = stream_settings.height
 
 				this.photo.width = document.getElementById('camera_preview').offsetWidth
-				this.$refs.camera.width = this.photo.width
-
 				this.photo.height = document.getElementById('camera_preview').offsetHeight
+
+				this.$refs.camera.width = this.photo.width
+				this.$refs.camera.height = this.photo.height
 			}).catch(error => {
 				this.message.error('Cannot load device camera! '+error)
 			})
@@ -259,6 +260,12 @@ export default {
 html, body {
 	margin: 0;
 	padding: 0;
+	overflow: hidden;
+	height: 100vh;
+}
+
+* {
+	overflow: hidden;
 }
 
 #all {
@@ -268,19 +275,26 @@ html, body {
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
-	justify-content: space-between;
 	overflow: hidden;
 	color: white;
+	margin: 0;
+	padding: 0;
+}
+
+#camera_preview {
+	height: 75vh;
 }
 
 #group_select {
 	display: flex;
+	height: 7.5vh;
 }
 
 #prompt_select {
 	display: flex;
 	flex-direction: column;
 	text-align: center;
+	margin-top: 30%;
 }
 
 #prompt_select .n-icon {
@@ -288,10 +302,13 @@ html, body {
 }
 
 #take_photo {
-	height: 15%;
+	height: 15vh;
 	background-color: #222;
 	display: flex;
 	justify-content: center;
+	bottom: 0;
+	position: absolute;
+	width: 100%;
 }
 
 #take_photo .n-button {