From e1f1425373599042e4d843aec5c43cdba8ad8e33 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 28 Feb 2025 20:22:03 -0600
Subject: [PATCH] Adjust responsive text

---
 src/admin/AdminAddAllUploads.tsx    | 5 +----
 src/photo/PhotoUploadWithStatus.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/admin/AdminAddAllUploads.tsx b/src/admin/AdminAddAllUploads.tsx
index 024b285e..8360411f 100644
--- a/src/admin/AdminAddAllUploads.tsx
+++ b/src/admin/AdminAddAllUploads.tsx
@@ -20,7 +20,6 @@ import ProgressButton from '@/components/primitives/ProgressButton';
 import { UrlAddStatus } from './AdminUploadsClient';
 import PhotoTagFieldset from './PhotoTagFieldset';
 import DeleteUploadButton from './DeleteUploadButton';
-import ResponsiveText from '@/components/primitives/ResponsiveText';
 
 const UPLOAD_BATCH_SIZE = 4;
 
@@ -190,9 +189,7 @@ export default function AdminAddAllUploads({
               shouldRedirectToAdminPhotos
               hideTextOnMobile={false}
             >
-              <ResponsiveText shortText="Delete Uploads">
-                Delete All Uploads
-              </ResponsiveText>
+              Delete All Uploads
             </DeleteUploadButton>
           </div>
         </div>
diff --git a/src/photo/PhotoUploadWithStatus.tsx b/src/photo/PhotoUploadWithStatus.tsx
index 2ea6b83c..4702d0de 100644
--- a/src/photo/PhotoUploadWithStatus.tsx
+++ b/src/photo/PhotoUploadWithStatus.tsx
@@ -10,6 +10,7 @@ import { RefObject, useTransition } from 'react';
 import { useRef } from 'react';
 import { useEffect } from 'react';
 import Spinner from '@/components/Spinner';
+import ResponsiveText from '@/components/primitives/ResponsiveText';
 
 export default function PhotoUploadWithStatus({
   inputRef,
@@ -68,6 +69,8 @@ export default function PhotoUploadWithStatus({
   }, [isPending, resetUploadState]);
   const isFinishing = isPending && shouldResetUploadStateAfterPending.current;
 
+  const uploadNumberText = `${fileUploadIndex + 1} of ${filesLength}`;
+
   return (
     <div className={clsx(
       'flex items-center gap-4',
@@ -148,7 +151,10 @@ export default function PhotoUploadWithStatus({
               </>
               : <>
                 {!showButton &&
-                  `Uploading ${fileUploadIndex + 1} of ${filesLength}: `}
+                  <ResponsiveText shortText={uploadNumberText}>
+                    Uploading {uploadNumberText}
+                  </ResponsiveText>}
+                {': '}
                 {fileUploadName}
               </>
             : !showButton && <>Initializing</>}