From 956d5dacdaa8bb8092d3c324af931eec183df8b9 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:38:49 +0000
Subject: [PATCH] fix: Center map click modal with proper padding

- Center modal properly within map preview area
- Add 24px padding from map edges
- Make modal more compact (max-w-xs)
- Reduce text and element sizes for better fit

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

diff --git a/web/components/ScraperTest.tsx b/web/components/ScraperTest.tsx
index e00bb3c..de6e55d 100644
--- a/web/components/ScraperTest.tsx
+++ b/web/components/ScraperTest.tsx
@@ -638,23 +638,24 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
                 {/* Map Click Warning Modal */}
                 {showMapClickModal && (
                   <div
-                    className="absolute inset-0 flex items-center justify-center backdrop-blur-md bg-gray-900/40 p-4 z-20"
+                    className="absolute inset-0 flex items-center justify-center backdrop-blur-md bg-gray-900/40 z-20"
+                    style={{ padding: '24px' }}
                     onClick={() => setShowMapClickModal(false)}
                   >
                     <div
-                      className="bg-white rounded-2xl p-6 shadow-2xl max-w-sm border-2 border-blue-500 animate-fade-in"
+                      className="bg-white rounded-2xl p-5 shadow-2xl max-w-xs w-full border-2 border-blue-500 animate-fade-in mx-auto"
                       onClick={(e) => e.stopPropagation()}
                     >
-                      <div className="text-center mb-4">
-                        <div className="text-4xl mb-3">🔍</div>
-                        <h3 className="text-xl font-bold text-gray-900 mb-2">Use the Search Fields</h3>
+                      <div className="text-center mb-3">
+                        <div className="text-3xl mb-2">🔍</div>
+                        <h3 className="text-lg font-bold text-gray-900 mb-1">Use the Search Fields</h3>
                         <p className="text-sm text-gray-600">
-                          Due to technical limitations, please use the <strong>Business Name</strong> and <strong>Location</strong> fields above to find your business.
+                          Please use the fields above to find your business.
                         </p>
                       </div>
-                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
+                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-2.5 mb-3">
                         <p className="text-xs text-blue-800">
-                          <strong>Tip:</strong> Be specific with the business name and include the city for accurate results.
+                          <strong>Tip:</strong> Be specific with the name and location.
                         </p>
                       </div>
                       <button
@@ -662,9 +663,9 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
                           setShowMapClickModal(false);
                           searchInputRef.current?.focus();
                         }}
-                        className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-all flex items-center justify-center gap-2"
+                        className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-all flex items-center justify-center gap-2 text-sm"
                       >
-                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                         Go to Search