From 002124b1610b14c8364921a2d55496c13e46431d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 13 Mar 2026 21:09:05 -0500
Subject: [PATCH] Fix floating thumbnail on large screens

---
 src/components/AppGrid.tsx   |  2 +-
 src/photo/form/PhotoForm.tsx | 75 ++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/components/AppGrid.tsx b/src/components/AppGrid.tsx
index 70aacb8a..42e62a8e 100644
--- a/src/components/AppGrid.tsx
+++ b/src/components/AppGrid.tsx
@@ -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,
       )}
     >
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 26466ced..50e842e2 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -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>