feat: Enhance barcode scanner with improved mobile compatibility and error handling

Web/templates/library.html

@@ -76,11 +76,11 @@
             </div>
         </div>
         <div class="scanner-video-wrapper">
-            <video id="qr-reader" playsinline style="width: 100%; max-width: 500px; border-radius: 8px;"></video>
+            <video id="qr-reader" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
             <canvas id="scanner-canvas" style="display: none;"></canvas>
         </div>
         <div id="scanMessage" class="scanner-message" style="margin-top: 10px; text-align: center; font-weight: bold; color: #666;"></div>
-        <p style="font-size: 0.9em; color: #999; margin-top: 10px; text-align: center;">
+        <p style="font-size: 0.85em; color: #999; margin-top: 10px; margin-bottom: 0; text-align: center;">
             💡 Hinweis: Scan-Ergebnis wird automatisch in das Feld oben übernommen. USB-Scanner werden als Tastatureingabe erkannt.
         </p>
     </div>
@@ -797,6 +797,9 @@ function onScanError(error) {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         width: 100%;
+        box-sizing: border-box;
+        margin: 0 -12px;
+        padding: 0 12px;
     }
     .library-table-wrapper .table-row {
         min-width: 720px; /* allow table to have intrinsic width and be scrolled */
@@ -811,38 +814,50 @@ function onScanError(error) {
     background: #f5f5f5;
     border: 1px solid #ddd;
     border-radius: 8px;
-    padding: 16px;
-    margin: 16px 0;
+    padding: 12px;
+    margin: 12px 0;
+    overflow-x: hidden;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .scanner-header {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     margin-bottom: 12px;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .scanner-header h3 {
     margin: 0;
     color: #333;
-    font-size: 1.1em;
+    font-size: 1em;
+    flex: 0 0 auto;
+    white-space: nowrap;
 }
 
 .scanner-controls {
     display: flex;
-    gap: 8px;
+    gap: 6px;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .scanner-button {
     background: #2196F3;
     color: white;
     border: none;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-radius: 4px;
     cursor: pointer;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    white-space: nowrap;
+    flex: 0 1 auto;
     transition: background-color 0.2s;
 }
 
@@ -857,24 +872,44 @@ function onScanError(error) {
 .scanner-video-wrapper {
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: 12px 0;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
 #qr-reader {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
     border: 2px solid #2196F3;
     border-radius: 8px;
+    display: block;
 }
 
 .scanner-message {
     min-height: 20px;
-    font-size: 0.95em;
+    font-size: 0.9em;
     text-align: center;
+    word-wrap: break-word;
 }
 
 @media (max-width: 600px) {
+    .qr-container {
+        padding: 10px;
+        margin: 10px 0;
+    }
+
     .scanner-header {
         flex-direction: column;
         align-items: stretch;
+        gap: 8px;
+    }
+
+    .scanner-header h3 {
+        width: 100%;
+        font-size: 0.95em;
     }
 
     .scanner-controls {
@@ -883,7 +918,18 @@ function onScanError(error) {
     }
 
     .scanner-button {
-        flex: 1;
+        flex: 1 1 auto;
+        padding: 8px 6px;
+        font-size: 0.8em;
+    }
+
+    #qr-reader {
+        max-width: 100%;
+        border-radius: 6px;
+    }
+
+    .scanner-message {
+        font-size: 0.85em;
     }
 }
 </style>