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,32 +907,31 @@ import { analyzeProduct } from "../utils/productAnalysis";
             barcodeDisplay.textContent = "";
             showView(scannerView);
 
+            let selectedDeviceId : string;
             codeReader = new window.ZXing.BrowserMultiFormatReader();
 
-            const videoInputDevices =
-                await window.ZXing.BrowserCodeReader.listVideoInputDevices();
+            codeReader.listVideoInputDevices().then((videoInputDevices: unknown) => {
+                selectedDeviceId = videoInputDevices[0].deviceId
+                if (videoInputDevices.length >= 1) {
+                    videoInputDevices.forEach((element) => {
+                      const sourceOption = document.createElement('option')
+                      sourceOption.text = element.label
+                      sourceOption.value = element.deviceId
+                  })
+                }
 
-            if (videoInputDevices.length === 0) {
-                showError("No camera found");
-                scanning = false;
-                return;
-            }
-
-            const selectedDeviceId = videoInputDevices[0].deviceId;
-
-            await codeReader.decodeFromVideoDevice(
-                selectedDeviceId,
-                videoElement,
-                (result: any, err: any) => {
-                    if (result) {
-                        const code = result.getText();
-                        barcodeDisplay.textContent = code;
-                        barcodeDisplay.style.display = "block";
-                        codeReader.reset();
-                        searchProduct(code);
-                    }
-                },
-            );
+                document.getElementById('startButton').addEventListener('click', () => {
+                    codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {
+                      if (result) {
+                                  const code = result.getText();
+                                  barcodeDisplay.textContent = code;
+                                  barcodeDisplay.style.display = "block";
+                                  codeReader.reset();
+                                  searchProduct(code);
+                              }
+                    })
+                })
+            })
         } catch (err) {
             console.error("Scanner error:", err);
             showError(