From bd4b08a67da1a6db078acf79b80b114f5a537618 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 26 Jul 2025 12:13:21 +0200
Subject: [PATCH] fix: camera scaling on scan

---
 src/components/scanner/Phone.vue        | 23 +++++++++----------
 src/components/scanner/Scanner.vue      | 30 +++++++++++++------------
 src/views/public/scanner/RoomSelect.vue |  2 +-
 src/views/public/scanner/Scanner.vue    | 25 +++++++++++----------
 4 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/components/scanner/Phone.vue b/src/components/scanner/Phone.vue
index 10a3cb2..8dde659 100644
--- a/src/components/scanner/Phone.vue
+++ b/src/components/scanner/Phone.vue
@@ -1,12 +1,10 @@
 <template>
-  <div v-if="!inUse" class="relative flex flex-col w-full h-[455px] overflow-hidden">
+  <div v-if="!inUse" class="relative flex flex-col w-full h-[500px] overflow-hidden">
     <br />
     <button primary @click="startSession">Smartphone als Scanner verwenden</button>
   </div>
-  <div v-else class="relative flex flex-col w-full h-[455px] overflow-hidden">
-    <br />
-
-    <div class="grow flex flex-col gap-2 overflow-y-scroll pr-2">
+  <div v-else class="relative flex flex-col gap-2 w-full h-[500px] overflow-hidden">
+    <div class="grow flex flex-col gap-2 overflow-y-scroll pt-1 pr-2">
       <div
         v-for="i in results"
         :key="i"
@@ -18,13 +16,14 @@
       </div>
       <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
     </div>
-    <br />
-    <RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary"
-      >Link zur Scanoberfläche:</RouterLink
-    >
-    <div class="flex flex-row gap-4 items-center">
-      <TextCopy :copyText="roomId" />
-      <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
+    <div>
+      <RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary">
+        Link zur Scanoberfläche:
+      </RouterLink>
+      <div class="flex flex-row gap-4 items-center">
+        <TextCopy :copyText="roomId" />
+        <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
+      </div>
     </div>
 
     <div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2">
diff --git a/src/components/scanner/Scanner.vue b/src/components/scanner/Scanner.vue
index 4ef9cd6..260ea25 100644
--- a/src/components/scanner/Scanner.vue
+++ b/src/components/scanner/Scanner.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="flex flex-col gap-2 w-full min-h-[455px]">
-    <qrcode-stream
-      class="grow"
-      :constraints="selectedCamera?.constraints"
-      :track="trackFunctionOptions[4].value"
-      :formats="barcodeFormats"
-      :paused="paused"
-      @error="onError"
-      @detect="onDetect"
-      @camera-on="onCameraReady"
-    />
+  <div class="flex flex-col gap-2 w-full h-[500px] overflow-hidden">
+    <div class="grow w-full overflow-hidden pt-1">
+      <qrcode-stream
+        class="h-full w-full"
+        :constraints="selectedCamera?.constraints"
+        :track="trackFunctionOptions[4].value"
+        :formats="barcodeFormats"
+        :paused="paused"
+        @error="onError"
+        @detect="onDetect"
+        @camera-on="onCameraReady"
+      />
+    </div>
     <select v-model="selectedCamera">
       <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
     </select>
-    <div>
+    <div v-if="useInput">
       <label for="manual">Code eingeben</label>
-      <input v-if="useInput" id="manual" type="text" v-model="detected" />
+      <input id="manual" type="text" v-model="detected" />
     </div>
-    <div class="flex flex-row justify-end gap-4 py-2">
+    <div class="flex flex-row justify-end gap-4">
       <button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
       <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
     </div>
diff --git a/src/views/public/scanner/RoomSelect.vue b/src/views/public/scanner/RoomSelect.vue
index 6913c9c..c99d6be 100644
--- a/src/views/public/scanner/RoomSelect.vue
+++ b/src/views/public/scanner/RoomSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
-    <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="checkRoom">
+    <form class="flex flex-col gap-4 py-2 w-full max-w-xl px-3 mx-auto" @submit.prevent="checkRoom">
       <div>
         <label for="roomId">Scan-Id</label>
         <input type="text" id="roomId" required />
diff --git a/src/views/public/scanner/Scanner.vue b/src/views/public/scanner/Scanner.vue
index b9b0174..769a832 100644
--- a/src/views/public/scanner/Scanner.vue
+++ b/src/views/public/scanner/Scanner.vue
@@ -3,19 +3,20 @@
     <RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave">
       Zurück zur Sessionauswahl
     </RouterLink>
-    <div class="relative flex flex-col gap-2 w-full grow overflow-hidden max-w-md mx-auto">
+    <div class="relative flex flex-col gap-2 w-full grow overflow-hidden mx-auto">
       <Spinner v-if="selectedCamera == undefined" class="absolute top-3 left-1/2 -translate-y-1/2" />
-      <qrcode-stream
-        class="grow"
-        :constraints="selectedCamera?.constraints"
-        :track="trackFunctionOptions[4].value"
-        :formats="barcodeFormats"
-        :paused="paused"
-        @error="onError"
-        @detect="onDetect"
-        @camera-on="onCameraReady"
-      />
-      <br />
+      <div class="grow w-full overflow-hidden">
+        <qrcode-stream
+          class="h-full w-full"
+          :constraints="selectedCamera?.constraints"
+          :track="trackFunctionOptions[4].value"
+          :formats="barcodeFormats"
+          :paused="paused"
+          @error="onError"
+          @detect="onDetect"
+          @camera-on="onCameraReady"
+        />
+      </div>
       <select v-model="selectedCamera">
         <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
       </select>