Improve grid rendering with few items

Author: kurisu-dotto-komu

src/components/Common/Grid.tsx

@@ -1,14 +1,36 @@
-import type { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 
 interface GridProps {
   className?: string;
   children: ReactNode;
+  forceFullWidth?: boolean;
 }
 
-export default function Grid({ className, children }: GridProps) {
+export default function Grid({ className, children, forceFullWidth = false }: GridProps) {
+  // Reason: Use React.Children.toArray to properly flatten fragments
+  const childArray = React.Children.toArray(children);
+  const count = childArray.length;
+
+  // Consider less than 3 items as not having a full row
+  const hasFullRow = forceFullWidth || count >= 3;
+
+  if (hasFullRow) {
+    // Normal grid behavior for 3+ items
+    return (
+      <div
+        className={`grid grid-cols-1 gap-4 md:grid-cols-[repeat(auto-fit,minmax(300px,1fr))] ${
+          className || ""
+        }`.trim()}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  // Constrained width for 1-2 items
   return (
     <div
-      className={`grid grid-cols-1 gap-4 md:grid-cols-[repeat(auto-fit,minmax(300px,1fr))] ${
+      className={`grid grid-cols-1 gap-4 md:grid-cols-[repeat(auto-fit,minmax(300px,400px))] md:justify-center ${
         className || ""
       }`.trim()}
     >

src/components/Event/EventGallery.tsx

@@ -17,7 +17,7 @@ export default function EventGallery({ event }: Props) {
   }
 
   return (
-    <SimpleSection wide grid title={"Event Gallery"} element={<GalleryDisclaimer />}>
+    <SimpleSection wide title={"Event Gallery"} element={<GalleryDisclaimer />}>
       <EventGalleryImages event={event} />
     </SimpleSection>
   );

src/components/Event/EventGalleryImages.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { LuImageOff } from "react-icons/lu";
 
+import Grid from "@/components/Common/Grid";
 import type { EventEnriched } from "@/content";
 import { isEventUpcoming } from "@/utils/eventFilters";
 
@@ -83,27 +84,29 @@ export default function EventGalleryImages({ event }: Props) {
 
   return (
     <>
-      {reversedImages.map((img, index) => (
-        <button
-          key={img.id}
-          onClick={() => handleImageClick(index)}
-          className="glass-border rounded-box w-full overflow-hidden"
-          type="button"
-          aria-label={`View larger image: ${img.data.caption ?? ""}`}
-          data-testid={`gallery-image-${index}`}
-        >
-          <img
-            src={img.thumbnail.src}
-            srcSet={img.thumbnail.srcSet}
-            sizes={img.thumbnail.sizes}
-            alt={img.data.caption ?? ""}
-            className="bg-base-300 aspect-[4/3] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
-            loading="lazy"
-            width={320}
-            height={240}
-          />
-        </button>
-      ))}
+      <Grid>
+        {reversedImages.map((img, index) => (
+          <button
+            key={img.id}
+            onClick={() => handleImageClick(index)}
+            className="glass-border rounded-box w-full overflow-hidden"
+            type="button"
+            aria-label={`View larger image: ${img.data.caption ?? ""}`}
+            data-testid={`gallery-image-${index}`}
+          >
+            <img
+              src={img.thumbnail.src}
+              srcSet={img.thumbnail.srcSet}
+              sizes={img.thumbnail.sizes}
+              alt={img.data.caption ?? ""}
+              className="bg-base-300 aspect-[4/3] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
+              loading="lazy"
+              width={320}
+              height={240}
+            />
+          </button>
+        ))}
+      </Grid>
       <EventImageModal
         allImages={galleryImages}
         isOpen={isModalOpen}

src/components/Events/EventsViewAlbum.tsx

@@ -32,9 +32,7 @@ export default function EventsViewAlbum({ events }: Props) {
               <EventCardList events={[event]} />
             </Container>
             <Container wide className="mt-6">
-              <Grid data-testid="event-gallery-images">
-                <EventGalleryImages event={event} />
-              </Grid>
+              <EventGalleryImages event={event} />
             </Container>
           </div>
         ))}