From 0af79f491ad8d059bed101fbe47705d8fb5a774d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 15 Sep 2023 17:29:03 -0500
Subject: [PATCH] Fix share button placement for sm breakpoint

---
 src/components/IconPathButton.tsx |  1 -
 src/photo/PhotoLarge.tsx          | 25 +++++++++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/IconPathButton.tsx b/src/components/IconPathButton.tsx
index 91ad865d..53f8058c 100644
--- a/src/components/IconPathButton.tsx
+++ b/src/components/IconPathButton.tsx
@@ -46,7 +46,6 @@ export default function IconPathButton({
         router.push(path))}
       isLoading={shouldShowLoader}
       className={cc(
-        'min-h-[1.75rem]',
         'active:translate-y-[1px]',
         'text-gray-500 active:text-gray-600',
         'dark:text-gray-400 dark:active:text-gray-300',
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 9bf83dc5..a63c9380 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -80,17 +80,22 @@ export default function PhotoLarge({
               <li>{photo.exposureCompensationFormatted ?? '—'}</li>
             </ul>
             <div className={cc(
-              'uppercase',
-              'text-gray-500',
-              'dark:text-gray-400',
+              'flex gap-y-4',
+              'flex-col sm:flex-row md:flex-col',
             )}>
-              {photo.takenAtNaiveFormatted}
-            </div>
-            <div className="-translate-x-1">
-              <SharePhotoButton
-                photo={photo}
-                prefetch={prefetchShare}
-              />
+              <div className={cc(
+                'grow uppercase',
+                'text-gray-500',
+                'dark:text-gray-400',
+              )}>
+                {photo.takenAtNaiveFormatted}
+              </div>
+              <div className="-translate-x-0.5">
+                <SharePhotoButton
+                  photo={photo}
+                  prefetch={prefetchShare}
+                />
+              </div>
             </div>
           </>)}
         </div>}