strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix floating thumbnail on large screens

Browse Source
This commit is contained in:
Sam Becker 2026-03-13 21:09:05 -05:00
parent cdb6130345
commit 002124b161
2 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppGrid.tsx
View File

@ -41,7 +41,7 @@ export default function AppGrid({
'gap-3 md:gap-4', 'gap-3 md:gap-4',
'max-w-[1280px] 3xl:w-[1280px]', 'max-w-[1280px] 3xl:w-[1280px]',
// Offset sidebar width when centering on large screens // Offset sidebar width when centering on large screens
'3xl:translate-x-[162px]', '3xl:relative 3xl:left-[162px]',
className, className,
)} )}
> >

75
src/photo/form/PhotoForm.tsx
View File

@ -415,47 +415,46 @@ export default function PhotoForm({
/>; />;
return ( return (
<div className="space-y-4 max-w-[38rem] relative"> <div className="space-y-4 max-w-[38rem]">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="relative"> {thumbnail(true)}
{thumbnail(true)} <div className={clsx(
'max-md:hidden',
'fixed top-8 mr-4',
// Orient around responsive form fields
'left-[77%] min-[850px]:left-[41rem] lg:left-[42rem]',
// For some reason, left property cannot target relative ancestor
'3xl:left-auto 3xl:translate-x-[41rem]',
// Prevent image blocking form button interaction
'pointer-events-none',
)}>
{thumbnail(false, clsx(
'opacity-0 -translate-y-4',
!isThumbnailVisible &&
'opacity-100 translate-y-0 transition-all duration-300',
))}
</div>
<div className={clsx(
'absolute top-2 left-2 transition-opacity duration-500',
aiContent?.isLoading ? 'opacity-100' : 'opacity-0',
)}>
<div className={clsx( <div className={clsx(
'max-md:hidden', 'leading-none text-xs font-medium uppercase tracking-wide',
'fixed top-8', 'px-1.5 py-1 rounded-[4px]',
// Orient around responsive form fields 'inline-flex items-center gap-2',
'left-[77%] min-[850px]:left-[41rem] lg:left-[42rem]', 'bg-white/70 dark:bg-black/60 backdrop-blur-md',
'mr-4', 'border border-gray-900/10 dark:border-gray-700/70',
// Prevent image blocking form button interaction 'select-none',
'pointer-events-none',
)}> )}>
{thumbnail(false, clsx( <Spinner
'opacity-0 -translate-y-4', color="text"
!isThumbnailVisible && size={9}
'opacity-100 translate-y-0 transition-all duration-300', className={clsx(
))} 'text-extra-dim',
</div> 'translate-x-[1px] translate-y-[0.5px]',
<div className={clsx( )}
'absolute top-2 left-2 transition-opacity duration-500', />
aiContent?.isLoading ? 'opacity-100' : 'opacity-0', Analyzing image
)}>
<div className={clsx(
'leading-none text-xs font-medium uppercase tracking-wide',
'px-1.5 py-1 rounded-[4px]',
'inline-flex items-center gap-2',
'bg-white/70 dark:bg-black/60 backdrop-blur-md',
'border border-gray-900/10 dark:border-gray-700/70',
'select-none',
)}>
<Spinner
color="text"
size={9}
className={clsx(
'text-extra-dim',
'translate-x-[1px] translate-y-[0.5px]',
)}
/>
Analyzing image
</div>
</div> </div>
</div> </div>
</div> </div>