fix: update validation error message to overlay layout to prevent content shifting

This commit is contained in:
pradeepkumar
2026-04-18 10:54:52 +05:30
parent 945f0dafaa
commit ff17bab0db

View File

@@ -239,10 +239,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
</div> </div>
</div> </div>
{/* Validation Error Message */} {/* Validation Error Message (overlay — does not push layout) */}
{validationError && ( {validationError && (
<div className="mt-3 flex justify-center px-2"> <div className="pointer-events-none fixed inset-x-0 top-20 z-50 flex justify-center px-4 md:absolute md:top-auto md:bottom-[-56px] md:inset-x-0">
<div className="text-white font-serif text-xs md:text-sm bg-red-500/90 rounded-[7px] py-1.5 px-3 inline-flex items-center gap-2 max-w-fit shadow-md"> <div className="pointer-events-auto text-white font-serif text-xs md:text-sm bg-red-500/95 rounded-[7px] py-2 px-3 inline-flex items-center gap-2 max-w-[92%] shadow-lg">
<span className="text-left">{validationError}</span> <span className="text-left">{validationError}</span>
<button <button
onClick={handleClearError} onClick={handleClearError}