Refining photo form floating thumbnail

This commit is contained in:
Sam Becker 2025-08-28 17:47:52 -05:00
parent 16e6711f0d
commit 4dc3a976b7

View File

@ -330,14 +330,18 @@ export default function PhotoForm({
<div className="relative"> <div className="relative">
{thumbnail(true)} {thumbnail(true)}
<div className={clsx( <div className={clsx(
'max-lg:hidden fixed top-8 left-[42rem]', 'max-md:hidden',
// Prevent image blocking form buttons 'fixed top-8',
// Orient around responsive form fields
'left-[77%] min-[850px]:left-[41rem] lg:left-[42rem]',
'mr-4',
// Prevent image blocking form button interaction
'pointer-events-none', 'pointer-events-none',
)}> )}>
{thumbnail(false, clsx( {thumbnail(false, clsx(
'opacity-0 -translate-y-4', 'opacity-0 -translate-y-4',
!isThumbnailVisible && !isThumbnailVisible &&
'opacity-100 translate-y-0 transition-all duration-200', 'opacity-100 translate-y-0 transition-all duration-300',
))} ))}
</div> </div>
<div className={clsx( <div className={clsx(