From 5165d6515217e9be89147d33dab3aea13d232973 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sat, 24 Jan 2026 16:50:08 +0000
Subject: [PATCH] fix: Center confirmation modal using transform

- Use fixed positioning with top/left 50% and translate -50%
- More reliable centering regardless of parent containers
- Add max-width for mobile responsiveness

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/components/ScraperTest.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/ScraperTest.tsx b/web/components/ScraperTest.tsx
index ff58060..2cf273a 100644
--- a/web/components/ScraperTest.tsx
+++ b/web/components/ScraperTest.tsx
@@ -1273,12 +1273,12 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
       {/* Confirmation Modal */}
       {showConfirmModal && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
           onClick={() => setShowConfirmModal(false)}
         >
           <div
-            className="bg-white rounded-2xl shadow-2xl max-w-md border-2 border-green-500 animate-fade-in"
-            style={{ width: '400px' }}
+            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl border-2 border-green-500 animate-fade-in"
+            style={{ width: '400px', maxWidth: 'calc(100vw - 32px)' }}
             onClick={(e) => e.stopPropagation()}
           >
             {/* Header */}