View large upload thumbnails

src/admin/AdminUploadsTable.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import ImageSmall from '@/components/image/ImageSmall';
 import Spinner from '@/components/Spinner';
 import {
   getIdFromStorageUrl,
@@ -13,6 +12,7 @@ import AddButton from './AddButton';
 import { UrlAddStatus } from './AdminUploadsClient';
 import ResponsiveDate from '@/components/ResponsiveDate';
 import DeleteBlobButton from './DeleteUploadButton';
+import ImageMedium from '@/components/image/ImageMedium';
 
 export default function AdminUploadsTable({
   isAdding,
@@ -30,14 +30,13 @@ export default function AdminUploadsTable({
   return (
     <div className="space-y-4">
       {urlAddStatuses.map(({ url, status, statusMessage, uploadedAt, size }) =>
-        <div key={url}>
-          <div className={clsx(
-            'flex items-center gap-2 w-full min-h-8',
-          )}>
         <div
+          key={url}
           className={clsx(
-                'flex items-center grow gap-2',
+            'flex items-center grow',
             'transition-opacity',
+            'rounded-lg overflow-hidden',
+            'border-main bg-extra-dim',
             isAdding && !isComplete && status !== 'adding' && 'opacity-30',
           )}
         >
@@ -47,20 +46,21 @@ export default function AdminUploadsTable({
               'translate-x-[-2px] scale-[1.125] shadow-lg',
             isAdding && !isComplete && status !== 'adding' &&
               'scale-90',
+            'w-[55%] sm:w-auto',
           )}>
-                <ImageSmall
+            <ImageMedium
               title={getIdFromStorageUrl(url)}
               src={url}
               alt={url}
               aspectRatio={3.0 / 2.0}
-                  className={clsx(
-                    'rounded-[3px] overflow-hidden',
-                    'border-main',
-                  )}
             />
           </div>
-              <span className="grow min-w-0">
-                <div className="truncate">
+          <div className={clsx(
+            'flex flex-col gap-2 w-full self-start',
+            'p-2.5 sm:p-4',
+          )}>
+            <div className="flex flex-col gap-0.5 h-full">
+              <div className="truncate font-medium">
                 {uploadedAt
                   ? <ResponsiveDate date={uploadedAt} />
                   : '—'}
@@ -77,7 +77,6 @@ export default function AdminUploadsTable({
                     ? `${size} ${getExtensionFromStorageUrl(url)?.toUpperCase()}`
                     : getExtensionFromStorageUrl(url)?.toUpperCase()}
               </div>
-              </span>
             </div>
             <span className="flex items-center gap-2">
               {isAdding || isComplete
@@ -101,9 +100,10 @@ export default function AdminUploadsTable({
                   <DeleteBlobButton
                     urls={[url]}
                     shouldRedirectToAdminPhotos={urlAddStatuses.length <= 1}
-                    onDelete={() => setUrlAddStatuses?.(urlAddStatuses.filter(
-                      ({ url: urlToRemove }) => urlToRemove !== url,
-                    ))}
+                    onDelete={() =>
+                      setUrlAddStatuses?.(urlAddStatuses
+                        .filter(({ url: urlToRemove }) =>
+                          urlToRemove !== url))}
                     isLoading={isDeleting}
                   />
                 </>}

src/components/Container.tsx

@@ -29,7 +29,7 @@ export default function Container({
     ];
     case 'gray-border': return [
       'text-medium',
-      'bg-gray-50 dark:bg-gray-900/40',
+      'bg-extra-dim',
       'border border-gray-200 dark:border-gray-800',
     ];
     case 'blue': return [

tailwind.css

@@ -165,6 +165,10 @@
   @apply
     bg-gray-100 dark:bg-gray-900/75
 }
+@utility bg-extra-dim {
+  @apply
+    bg-gray-50 dark:bg-gray-900/40
+}
 @utility bg-content {
   @apply
     bg-main border-medium