Improve admin photo view on mobile

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)}
+                <span className="truncate">
-                {photo.hidden && <span className="whitespace-nowrap">
+                  {titleForPhoto(photo, false)}
-                  {' '}
+                </span>
-                  <IconHidden
+                {photo.hidden &&
-                    className="inline translate-y-[-0.5px]"
+                  <span>
-                    size={16}
+                    <IconHidden
-                  />
+                      className="inline translate-y-[-0.5px]"
-                </span>}
+                      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
-                <PhotoDate {...{ photo, dateType, timezone }} />
+                {...{ photo, dateType, timezone }}
-                {photoNeedsToBeSynced(photo) &&
+                className="truncate"
+              />
+              {photoNeedsToBeSynced(photo) &&
+                <span>
                   <Tooltip
                     content={getPhotoSyncStatusText(photo)}
-                    classNameTrigger={clsx(
+                    classNameTrigger="text-blue-600 dark:text-blue-400"
-                      'ml-1.5',
-                      'text-blue-600 dark:text-blue-400',
-                    )}
                     supportMobile
-                  />}
+                  />
-              </>}
+                </span>}
             </div>
           </div>
           <div className={clsx(

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>