alezmad/whyrating-engine-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Center map click modal with proper padding

Browse Source 
- 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>
This commit is contained in:
Alejandro Gutiérrez
2026-01-24 16:38:49 +00:00
parent d4c3018429
commit 956d5dacda
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/ScraperTest.tsx
View File

@@ -638,23 +638,24 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
{/* Map Click Warning Modal */} {/* Map Click Warning Modal */}
{showMapClickModal && ( {showMapClickModal && (
<div <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)} onClick={() => setShowMapClickModal(false)}
> >
<div <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()} onClick={(e) => e.stopPropagation()}
> >
<div className="text-center mb-4"> <div className="text-center mb-3">
<div className="text-4xl mb-3">🔍</div> <div className="text-3xl mb-2">🔍</div>
<h3 className="text-xl font-bold text-gray-900 mb-2">Use the Search Fields</h3> <h3 className="text-lg font-bold text-gray-900 mb-1">Use the Search Fields</h3>
<p className="text-sm text-gray-600"> <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> </p>
</div> </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"> <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> </p>
</div> </div>
<button <button
@@ -662,9 +663,9 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
setShowMapClickModal(false); setShowMapClickModal(false);
searchInputRef.current?.focus(); 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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg> </svg>
Go to Search Go to Search