From 76621b965b641b637853d404ac27c54d9db42a14 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 17 Jul 2025 09:25:41 -0500
Subject: [PATCH] Rationalize admin photo icon layout

---
 src/admin/AdminPhotosTable.tsx | 51 +++++++++++++++++++---------------
 src/photo/sync.ts              |  2 +-
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/admin/AdminPhotosTable.tsx b/src/admin/AdminPhotosTable.tsx
index 820cc213..466670ab 100644
--- a/src/admin/AdminPhotosTable.tsx
+++ b/src/admin/AdminPhotosTable.tsx
@@ -63,32 +63,47 @@ export default function AdminPhotosTable({
             'flex flex-col lg:flex-row min-w-0 gap-x-3',
             opacityForPhotoId(photo.id),
           )}>
-            <Link
+            <span
               key={photo.id}
-              href={pathForPhoto({ photo })}
-              className="lg:min-w-[50%] flex items-center gap-2"
-              prefetch={false}
+              className="lg:min-w-[50%] flex items-center gap-1.5"
             >
               <span className={clsx(
-                'flex w-full gap-1.5',
+                'truncate',
                 photo.hidden && 'text-dim',
               )}>
-                <span className="truncate">
+                <Link
+                  href={pathForPhoto({ photo })}
+                  prefetch={false}
+                >
                   {titleForPhoto(photo, false)}
-                </span>
-                <span className="inline-flex items-center">
-                  <PhotoVisibilityIcon photo={photo} />
-                </span>
+                </Link>
               </span>
+              <span className={clsx(
+                'inline-flex items-center',
+                photo.hidden && 'text-dim',
+              )}>
+                <PhotoVisibilityIcon photo={photo} />
+              </span>
+              {photoNeedsToBeSynced(photo) &&
+                <span>
+                  <Tooltip
+                    content={getPhotoSyncStatusText(photo)}
+                    classNameTrigger={clsx(
+                      'text-blue-600 dark:text-blue-400',
+                      'translate-y-[0.5px]',
+                    )}
+                    supportMobile
+                  />
+                </span>}
               {photo.priorityOrder !== null &&
                 <span className={clsx(
-                  'text-xs leading-none px-1.5 py-1 rounded-xs',
-                  'dark:text-gray-300',
-                  'bg-gray-100 dark:bg-gray-800',
+                  'px-[5px] py-[3px] sm:ml-[3px]',
+                  'text-xs leading-none',
+                  'bg-medium text-main rounded-sm',
                 )}>
                   {photo.priorityOrder}
                 </span>}
-            </Link>
+            </span>
             <div className={clsx(
               'flex min-w-0 gap-1.5 w-full',
               'lg:w-[50%] uppercase',
@@ -98,14 +113,6 @@ export default function AdminPhotosTable({
                 {...{ photo, dateType, timezone }}
                 className="truncate"
               />
-              {photoNeedsToBeSynced(photo) &&
-                <span>
-                  <Tooltip
-                    content={getPhotoSyncStatusText(photo)}
-                    classNameTrigger="text-blue-600 dark:text-blue-400"
-                    supportMobile
-                  />
-                </span>}
             </div>
           </div>
           <div className={clsx(
diff --git a/src/photo/sync.ts b/src/photo/sync.ts
index 07aece56..b5d6af04 100644
--- a/src/photo/sync.ts
+++ b/src/photo/sync.ts
@@ -64,7 +64,7 @@ export const getPhotoSyncStatusText = (photo: Photo) => {
       .join(', ');
     text.push(`Missing AI Text (${missingFieldsText})`);
   }
-  return text.join(' and ');
+  return text.join(' and ') + '—sync to update';
 };
 
 export const getPhotosSyncStatusText = (photos: Photo[]) => {