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,11 +70,14 @@ export default function AdminPhotosTable({
               prefetch={false}
             >
               <span className={clsx(
+                'flex w-full gap-1.5',
                 photo.hidden && 'text-dim',
               )}>
+                <span className="truncate">
                   {titleForPhoto(photo, false)}
-                {photo.hidden && <span className="whitespace-nowrap">
-                  {' '}
+                </span>
+                {photo.hidden &&
+                  <span>
                     <IconHidden
                       className="inline translate-y-[-0.5px]"
                       size={16}
@@ -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 }} />
+              <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(

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>