constrain image max width

UoaWDCC · Aug 29, 2024 · 6af9d19 · 6af9d19
1 parent 1481546
commit 6af9d19
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/client/src/components/composite/LodgeInfo/LodgeInfoGallery/LodgeInfoGallery.tsx b/client/src/components/composite/LodgeInfo/LodgeInfoGallery/LodgeInfoGallery.tsx
@@ -4,7 +4,7 @@ interface ILodgeInfoGallery {
   /**
    * A list of srcs for all the images in the gallery.
    *
-   * This should be pre-sorted
+   * This should be **pre-sorted** and **unique**
    *
    * @example
    * ['https://image-url-1.com', 'https://image-url-2.com', 'https://image-url-3.com']
@@ -20,15 +20,18 @@ const LodgeInfoGallery = ({ imageSrcs = [] }: ILodgeInfoGallery) => {
     <>
       <div className="flex space-x-4 overflow-x-auto p-2">
         {imageSrcs.map((url, index) => (
-          <div key={index} className="flex-shrink-0">
-            <Image
-              src={url}
-              alt={`Photo ${index + 1}`}
-              width={400}
-              height={400}
-              className="rounded-sm shadow-lg"
-            />
-          </div>
+          <>
+            {/* We require a `max-width` style to constrain the image on smaller screens */}
+            <div key={url} className="max-w-[95vw] flex-shrink-0">
+              <Image
+                src={url}
+                alt={`Photo ${index + 1}`}
+                width={400}
+                height={400}
+                className="rounded-sm shadow-lg"
+              />
+            </div>
+          </>
         ))}
       </div>
     </>