From 01166d7867ecac41eafe9de95a5b471c9a1aa9e1 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 26 Jan 2025 19:08:48 -0600
Subject: [PATCH] Refine large photo buttons on small screens

---
 src/components/ResponsiveDate.tsx |  2 +-
 src/photo/PhotoLarge.tsx          | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/ResponsiveDate.tsx b/src/components/ResponsiveDate.tsx
index 7aa6c1d8..154e1509 100644
--- a/src/components/ResponsiveDate.tsx
+++ b/src/components/ResponsiveDate.tsx
@@ -48,7 +48,7 @@ export default function ResponsiveDate({
     <span
       title={showPlaceholder ? 'LOADING LOCAL TIME' : title}
       className={clsx(
-        'uppercase rounded-md transition-colors',
+        'uppercase rounded-md transition-colors whitespace-nowrap',
         showPlaceholder && 'bg-dim',
         className,
       )}
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 709f2152..14bd31f6 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -276,10 +276,8 @@ export default function PhotoLarge({
                   />}
               </>}
             <div className={clsx(
-              'flex gap-x-2.5 gap-y-baseline',
-              ALLOW_PUBLIC_DOWNLOADS
-                ? 'flex-col'
-                : 'md:flex-col',
+              'flex gap-x-3 gap-y-baseline',
+              'md:flex-col flex-wrap',
               'md:justify-normal',
             )}>
               <PhotoDate
@@ -297,9 +295,7 @@ export default function PhotoLarge({
               />
               <div className={clsx(
                 'flex gap-1 translate-y-[0.5px]',
-                ALLOW_PUBLIC_DOWNLOADS
-                  ? 'translate-x-[-2.5px]'
-                  : 'md:translate-x-[-2.5px]',
+                'translate-x-[-2.5px]',
               )}>
                 {showZoomControls &&
                   <LoaderButton
@@ -324,9 +320,7 @@ export default function PhotoLarge({
                   />}
                 {ALLOW_PUBLIC_DOWNLOADS && 
                   <DownloadButton 
-                    className={clsx(
-                      'translate-y-[0.5px] md:translate-y-0',
-                    )}
+                    className="translate-y-[0.5px] md:translate-y-0"
                     photo={photo} 
                   />}
               </div>