From 61759f450c63b94861d3c797028d973e9810485f Mon Sep 17 00:00:00 2001
From: Cara Barter <carabarter@gmail.com>
Date: Wed, 11 Sep 2024 15:50:46 -0700
Subject: [PATCH 1/2] limited width of description and acknowledgemen. Added
 margin for ease of readability

---
 .../ImageWithLightboxPresentation.js          | 31 +++++--------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js b/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
index f882a986..ac1d9b07 100644
--- a/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
+++ b/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
@@ -15,11 +15,7 @@ function ImageWithLightboxPresentation({
   const [lightboxOpen, setLightboxOpen] = useState(false)
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setLightboxOpen(true)}
-        className="relative group flex"
-      >
+      <button type="button" onClick={() => setLightboxOpen(true)} className="relative group flex">
         <img
           className={imgStyling}
           src={getMediaPath({
@@ -33,20 +29,17 @@ function ImageWithLightboxPresentation({
         {withIcon &&
           getIcon(
             'InfoCircleSolid',
-            'absolute bottom-2 right-2 p-1 w-6 h-6 text-white fill-current opacity-60 group-hover:opacity-100',
+            'absolute bottom-2 right-2 p-1 w-6 h-6 text-white fill-current opacity-60 group-hover:opacity-100'
           )}
       </button>
       {/* Lightbox Modal */}
-      <Modal.Presentation
-        isOpen={lightboxOpen}
-        closeHandler={() => setLightboxOpen(false)}
-      >
+      <Modal.Presentation isOpen={lightboxOpen} closeHandler={() => setLightboxOpen(false)}>
         <div
           id="ImageWithLightboxPresentation"
-          className="inline-block text-white transform transition-all align-middle max-w-2xl lg:max-w-4xl xl:max-w-7xl"
+          className="inline-block text-white transform transition-all align-middle md:w-2/3 max-w-2xl lg:max-w-4xl xl:max-w-7xl"
         >
           <img
-            className="object-contain sm:h-4/5-screen shadow-xl mx-auto"
+            className="object-contain sm:h-4/5-screen shadow-xl mx-auto w-1/2-screen"
             src={getMediaPath({
               mediaObject: image,
               type: IMAGE,
@@ -54,17 +47,9 @@ function ImageWithLightboxPresentation({
             })}
             alt={image?.title}
           />
-          <div className="mt-1 text-lg md:text-xl font-medium">
-            {image?.title}
-          </div>
-          {image?.description && (
-            <div className="text-base">{image?.description}</div>
-          )}
-          {image?.acknowledgement && (
-            <div className="text-sm">
-              Acknowledgement: {image?.acknowledgement}
-            </div>
-          )}
+          <div className="my-1 text-lg md:text-xl font-medium">{image?.title}</div>
+          {image?.description && <div className="text-base my-2">Description: {image?.description}</div>}
+          {image?.acknowledgement && <div className="text-sm my-2">Acknowledgement: {image?.acknowledgement}</div>}
         </div>
       </Modal.Presentation>
     </>

From 765afedb856091984c46e4ce89305f94ebb9eff9 Mon Sep 17 00:00:00 2001
From: Cara Barter <carabarter@gmail.com>
Date: Wed, 11 Sep 2024 15:55:04 -0700
Subject: [PATCH 2/2] removed unneeded code

---
 .../ImageWithLightbox/ImageWithLightboxPresentation.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js b/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
index ac1d9b07..6795178c 100644
--- a/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
+++ b/src/components/ImageWithLightbox/ImageWithLightboxPresentation.js
@@ -39,7 +39,7 @@ function ImageWithLightboxPresentation({
           className="inline-block text-white transform transition-all align-middle md:w-2/3 max-w-2xl lg:max-w-4xl xl:max-w-7xl"
         >
           <img
-            className="object-contain sm:h-4/5-screen shadow-xl mx-auto w-1/2-screen"
+            className="object-contain sm:h-4/5-screen shadow-xl mx-auto"
             src={getMediaPath({
               mediaObject: image,
               type: IMAGE,