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',
'max-w-[1280px] 3xl:w-[1280px]',
// Offset sidebar width when centering on large screens
'3xl:translate-x-[162px]',
'3xl:relative 3xl:left-[162px]',
className,
)}
>

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

@ -415,47 +415,46 @@ export default function PhotoForm({
/>;
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="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(
'max-md:hidden',
'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',
'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',
)}>
{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(
'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>
<Spinner
color="text"
size={9}
className={clsx(
'text-extra-dim',
'translate-x-[1px] translate-y-[0.5px]',
)}
/>
Analyzing image
</div>
</div>
</div>