From a050ef6702f44b24f3cfdf7fe70a58de77bf8574 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 9 Apr 2025 18:12:37 +0100
Subject: [PATCH] feat: make background div in qr-scanner dialog close on click

---
 src/app/components/submit/qr-scanner.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/submit/qr-scanner.tsx b/src/app/components/submit/qr-scanner.tsx
index d38b0e9..c392187 100644
--- a/src/app/components/submit/qr-scanner.tsx
+++ b/src/app/components/submit/qr-scanner.tsx
@@ -107,8 +107,10 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 flex items-center justify-center z-40 backdrop-brightness-75 backdrop-blur-xs">
-			<div className="bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md">
+		<div className="fixed inset-0 flex items-center justify-center z-40">
+			<div onClick={() => setIsOpen(false)} className="z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs"></div>
+
+			<div className="z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md">
 				<div className="flex justify-between items-center mb-2">
 					<h2 className="text-xl font-bold">Scan QR Code</h2>
 					<button onClick={() => setIsOpen(false)} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">