From f89f01ff986f075fe431bc8ac377d7f2d17450d8 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 17:29:36 -0700
Subject: [PATCH] fix horizontal scrolling on mobile

---
 src/components/GalleryImage/GalleryImage.js | 6 +++---
 src/components/GalleryImage/MetadataItem.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 757c78b..57fae77 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -185,7 +185,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${prevImage}/`}
             >
-              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronLeft /></span>
             </Link>
           )}
           <div className={classnames("pb-2 flex", orientationClasses)}>
@@ -264,7 +264,7 @@ const GalleryImage = ({
                   icon={<Calendar />}
                   title="date taken"
                 />
-                <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
+                <div className="sm:flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
                   <MetadataItem
                     data={shutterSpeed}
                     icon={<Stopwatch />}
@@ -317,7 +317,7 @@ const GalleryImage = ({
               }}
               to={`/photogallery/${nextImage}/`}
             >
-              <span className="p-2 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
+              <span className="p-1 lg:p-4 bg-muted-light/25 rounded-full"><ChevronRight /></span>
             </Link>
           )}
         </div>
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
index 89fe065..3ae3559 100644
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -5,7 +5,7 @@ const MetadataItem = ({ icon, data, title }) =>
     <div className="flex justify-end items-end mr-2 font-mono">
       <div className="flex flex-col items-end my-2">
         <span className="text-sm opacity-60 m-0 ">{title}</span>
-        <span className="text-lg leading-4">{data}</span>
+        <span className="md:text-lg leading-4">{data}</span>
       </div>
       <span className="ml-2 pb-2 text-2xl">
         {icon}