From 46304cf32b03a6ff1ef9b70a34aa2d02dacd86bc Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Sun, 18 Jan 2026 08:07:29 +0000
Subject: [PATCH] Xinon mobile/add top margin

---
 public/mobile/app.js                          |  2 +-
 .../modules/lager/movement/MovementForm.js    | 28 +++++++++++++++----
 public/mobile/shared/base.css                 | 20 +++++++++++--
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/public/mobile/app.js b/public/mobile/app.js
index b45188bbe..a71b22eac 100644
--- a/public/mobile/app.js
+++ b/public/mobile/app.js
@@ -422,7 +422,7 @@ const App = {
 
             <template v-else-if="currentView === 'app'">
                 <div class="h-full flex flex-col">
-                    <header class="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-2 py-2 flex items-center safe-area-top flex-shrink-0 z-10">
+                    <header class="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-2 flex items-center app-header flex-shrink-0 z-10">
                         <button
                             @click="goBack"
                             :class="[
diff --git a/public/mobile/modules/lager/movement/MovementForm.js b/public/mobile/modules/lager/movement/MovementForm.js
index 383df6415..949afe1bc 100644
--- a/public/mobile/modules/lager/movement/MovementForm.js
+++ b/public/mobile/modules/lager/movement/MovementForm.js
@@ -479,9 +479,27 @@ export default {
         }, { deep: true });
 
         // ==================== SCANNER FUNCTIONS ====================
-        const startScanner = async () => {
+        let scannerRestarting = false;
+
+        const startScanner = async (delay = 0) => {
+            if (scannerRestarting) return;
             scannerError.value = '';
+
+            // Add delay for turbo mode restarts to let camera fully release
+            if (delay > 0) {
+                scannerRestarting = true;
+                await new Promise(resolve => setTimeout(resolve, delay));
+                scannerRestarting = false;
+            }
+
             try {
+                // Ensure previous instance is cleared
+                if (scanner.value) {
+                    try { await scanner.value.stop(); } catch (e) {}
+                    scanner.value = null;
+                }
+                await nextTick();
+
                 scanner.value = new Html5Qrcode('qr-reader-movement');
                 await scanner.value.start(
                     { facingMode: 'environment' },
@@ -578,10 +596,10 @@ export default {
                     const typeLabel = selectedType.value === 'IN' ? '+' : selectedType.value === 'OUT' ? '-' : '±';
                     emit('toast', `${typeLabel}1 ${article.title}`, 'success');
 
-                    // Reset and restart scanner
+                    // Reset and restart scanner with delay for camera to release
                     scannedArticle.value = null;
                     currentStock.value = 0;
-                    await startScanner();
+                    await startScanner(300);
                 } else {
                     emit('toast', result.message || 'Fehler', 'error');
                     // Fall back to normal mode
@@ -609,10 +627,10 @@ export default {
                 emit('toast', `+ ${article.title}`, 'success');
             }
 
-            // Reset and restart scanner
+            // Reset and restart scanner with small delay
             scannedArticle.value = null;
             currentStock.value = 0;
-            startScanner();
+            startScanner(200);
         };
 
         const updateCartQuantity = (index, qty) => {
diff --git a/public/mobile/shared/base.css b/public/mobile/shared/base.css
index f201ee9ae..c6060bc34 100644
--- a/public/mobile/shared/base.css
+++ b/public/mobile/shared/base.css
@@ -45,13 +45,27 @@ input, textarea, [contenteditable] {
     user-select: text;
 }
 
-/* Safe area insets for notched devices */
+/* Safe area insets for notched devices (iPhone Dynamic Island, etc.) */
 .safe-area-top {
-    padding-top: env(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top, 0px);
 }
 
 .safe-area-bottom {
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* App header with safe area - extends background into notch area */
+.app-header {
+    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
+    padding-bottom: 0.5rem;
+}
+
+/* Full safe area container that accounts for both top and bottom */
+.safe-area-container {
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-left: env(safe-area-inset-left, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
 }