fix: update validation error message to overlay layout to prevent content shifting
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user