try fixing scanner

astro.config.mjs

@@ -4,7 +4,6 @@ import { defineConfig } from "astro/config";
 // https://astro.build/config
 export default defineConfig({
   output: "server",
-  base: "/foodscanner",
   adapter: node({
     mode: "standalone",
   }),

src/components/Scanner.astro

@@ -2,7 +2,7 @@
 // Astro component - no props needed
 ---
 
-<style>
+<style is:global>
 /* Reset and Base Styles */
 * {
   margin: 0;
@@ -11,6 +11,8 @@
 }
 
 body {
+  margin: 0;
+  padding: 0;
   font-family:
     system-ui,
     -apple-system,
@@ -610,7 +612,7 @@ body {
                 </div>
 
                 <p class="scanner-info">
-                    📸 Point the camera at the barcode or QR code
+                    Point the camera at the barcode or QR code
                 </p>
 
                 <form id="scanner-barcode-form" class="form">
@@ -620,7 +622,7 @@ body {
                         placeholder="Or enter barcode manually"
                         class="input"
                     />
-                    <button type="submit" class="btn btn-green">
+                    <button id="startButton" type="submit" class="btn btn-green">
                         Search
                     </button>
                 </form>
@@ -905,23 +907,21 @@ import { analyzeProduct } from "../utils/productAnalysis";
             barcodeDisplay.textContent = "";
             showView(scannerView);
 
+            let selectedDeviceId : string;
             codeReader = new window.ZXing.BrowserMultiFormatReader();
 
-            const videoInputDevices =
+            codeReader.listVideoInputDevices().then((videoInputDevices: unknown) => {
-                await window.ZXing.BrowserCodeReader.listVideoInputDevices();
+                selectedDeviceId = videoInputDevices[0].deviceId
-
+                if (videoInputDevices.length >= 1) {
-            if (videoInputDevices.length === 0) {
+                    videoInputDevices.forEach((element) => {
-                showError("No camera found");
+                      const sourceOption = document.createElement('option')
-                scanning = false;
+                      sourceOption.text = element.label
-                return;
+                      sourceOption.value = element.deviceId
+                  })
                 }
 
-            const selectedDeviceId = videoInputDevices[0].deviceId;
+                document.getElementById('startButton').addEventListener('click', () => {
-
+                    codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
-            await codeReader.decodeFromVideoDevice(
-                selectedDeviceId,
-                videoElement,
-                (result: any, err: any) => {
                       if (result) {
                                   const code = result.getText();
                                   barcodeDisplay.textContent = code;
@@ -929,8 +929,9 @@ import { analyzeProduct } from "../utils/productAnalysis";
                                   codeReader.reset();
                                   searchProduct(code);
                               }
-                },
+                    })
-            );
+                })
+            })
         } catch (err) {
             console.error("Scanner error:", err);
             showError(