From 79bd96ac13ed2d0ed1485f2b998f56d019b900bd Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 24 May 2025 18:35:07 -0500
Subject: [PATCH] Improve admin photo view on mobile

---
 src/admin/AdminPhotosTable.tsx    | 40 +++++++++++++++++--------------
 src/components/ResponsiveDate.tsx |  4 ++--
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/admin/AdminPhotosTable.tsx b/src/admin/AdminPhotosTable.tsx
index b96dbf7f..1c7e44d7 100644
--- a/src/admin/AdminPhotosTable.tsx
+++ b/src/admin/AdminPhotosTable.tsx
@@ -60,7 +60,7 @@ export default function AdminPhotosTable({
             className={opacityForPhotoId(photo.id)}
           />
           <div className={clsx(
-            'flex flex-col lg:flex-row',
+            'flex flex-col lg:flex-row min-w-0',
             opacityForPhotoId(photo.id),
           )}>
             <Link
@@ -70,16 +70,19 @@ export default function AdminPhotosTable({
               prefetch={false}
             >
               <span className={clsx(
+                'flex w-full gap-1.5',
                 photo.hidden && 'text-dim',
               )}>
-                {titleForPhoto(photo, false)}
-                {photo.hidden && <span className="whitespace-nowrap">
-                  {' '}
-                  <IconHidden
-                    className="inline translate-y-[-0.5px]"
-                    size={16}
-                  />
-                </span>}
+                <span className="truncate">
+                  {titleForPhoto(photo, false)}
+                </span>
+                {photo.hidden &&
+                  <span>
+                    <IconHidden
+                      className="inline translate-y-[-0.5px]"
+                      size={16}
+                    />
+                  </span>}
               </span>
               {photo.priorityOrder !== null &&
                 <span className={clsx(
@@ -91,21 +94,22 @@ export default function AdminPhotosTable({
                 </span>}
             </Link>
             <div className={clsx(
+              'flex min-w-0 gap-1.5 w-full',
               'lg:w-[50%] uppercase',
               'text-dim',
             )}>
-              {<>
-                <PhotoDate {...{ photo, dateType, timezone }} />
-                {photoNeedsToBeSynced(photo) &&
+              <PhotoDate
+                {...{ photo, dateType, timezone }}
+                className="truncate"
+              />
+              {photoNeedsToBeSynced(photo) &&
+                <span>
                   <Tooltip
                     content={getPhotoSyncStatusText(photo)}
-                    classNameTrigger={clsx(
-                      'ml-1.5',
-                      'text-blue-600 dark:text-blue-400',
-                    )}
+                    classNameTrigger="text-blue-600 dark:text-blue-400"
                     supportMobile
-                  />}
-              </>}
+                  />
+                </span>}
             </div>
           </div>
           <div className={clsx(
diff --git a/src/components/ResponsiveDate.tsx b/src/components/ResponsiveDate.tsx
index 154e1509..e8a3657a 100644
--- a/src/components/ResponsiveDate.tsx
+++ b/src/components/ResponsiveDate.tsx
@@ -62,14 +62,14 @@ export default function ResponsiveDate({
       </span>
       {/* Medium */}
       <span
-        className={clsx('hidden xs:inline-block sm:hidden', contentClass)}
+        className={clsx('hidden xs:inline sm:hidden', contentClass)}
         aria-hidden
       >
         {formatDate({ ...formatDateProps, length: 'medium' })}
       </span>
       {/* Large */}
       <span
-        className={clsx('hidden sm:inline-block', contentClass)}
+        className={clsx('hidden sm:inline', contentClass)}
       >
         {formatDate(formatDateProps)}
       </span>