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>
This commit is contained in:
Alejandro Gutiérrez
2026-01-24 16:50:08 +00:00
parent 83b245bbfc
commit 5165d65152

View File

@@ -1273,12 +1273,12 @@ export default function ScraperTest({ onJobsChange, onSelectReviews }: ScraperTe
{/* Confirmation Modal */} {/* Confirmation Modal */}
{showConfirmModal && ( {showConfirmModal && (
<div <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)} onClick={() => setShowConfirmModal(false)}
> >
<div <div
className="bg-white rounded-2xl shadow-2xl max-w-md border-2 border-green-500 animate-fade-in" 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' }} style={{ width: '400px', maxWidth: 'calc(100vw - 32px)' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Header */} {/* Header */}