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,
)}
>

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

@ -415,16 +415,16 @@ 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)}
<div className={clsx(
'max-md:hidden',
'fixed top-8',
'fixed top-8 mr-4',
// Orient around responsive form fields
'left-[77%] min-[850px]:left-[41rem] lg:left-[42rem]',
'mr-4',
// 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',
)}>
@ -458,7 +458,6 @@ export default function PhotoForm({
</div>
</div>
</div>
</div>
{formActionErrorMessage &&
<ErrorNote>{formActionErrorMessage}</ErrorNote>}
<div className={clsx(