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

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

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