Fix People media grid + Faces of BEARS right-aligning the last incomplete row

CSS-columns masonry balances uniform-aspect images so the last item lands
in whichever column keeps heights even — visually the rightmost column.
Switch both surfaces to CSS Grid so an incomplete final row left-aligns.

Adds a "native-rows" mode to ImageGrid (CSS Grid + native aspect, no 1:1
crop), plumbed through MediaAccordion / CollapsibleImageGrid, and used
for the People category. FacesOfBears swaps its inline columns for grid
directly since FaceCard isn't an Img.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: leopoldblum

src/components/about/FacesOfBears.astro

@@ -96,15 +96,13 @@ const desktopColWidth = `${+(100 / cols).toFixed(3)}vw`;
         x-bind:class="isOpen ? 'pb-6' : 'pb-0'"
       >
         <div x-ref="content" class="p-1">
-          <div class="columns-2 lg:columns-3 gap-4 lg:gap-6">
+          <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6 items-start">
             {faces.map((face) => (
-              <div class="break-inside-avoid mb-4 lg:mb-6">
-                <FaceCard
-                  coverImage={face.coverImage}
-                  name={face.name}
-                  role={face.role}
-                />
-              </div>
+              <FaceCard
+                coverImage={face.coverImage}
+                name={face.name}
+                role={face.role}
+              />
             ))}
           </div>
         </div>

src/components/reusable/CollapsibleImageGrid.astro

@@ -17,6 +17,8 @@ interface Props {
   gap?: "sm" | "md" | "lg";
   /** Number of preview rows visible when collapsed (default: 1) */
   previewRows?: number;
+  /** Aspect ratio mode for the inner ImageGrid (default: 'native' masonry) */
+  aspectRatio?: "square" | "native" | "native-rows";
   /** Additional CSS classes for the ImageGrid */
   class?: string;
 }
@@ -26,6 +28,7 @@ const {
   cols = 4,
   gap = "md",
   previewRows = 1,
+  aspectRatio = "native",
   class: className,
 } = Astro.props;
 
@@ -86,7 +89,7 @@ const desktopColWidth = `${+(100 / cols).toFixed(3)}vw`;
         cols={cols}
         gap={gap}
         enableClickToEnlarge={true}
-        aspectRatio="native"
+        aspectRatio={aspectRatio}
         class={className}
       />
     </div>

src/components/reusable/ImageGrid.astro

@@ -16,8 +16,8 @@ interface Props {
   class?: string;
   /** Whether to enable click-to-enlarge functionality (default: true) */
   enableClickToEnlarge?: boolean;
-  /** Aspect ratio mode: 'square' crops to 1:1, 'native' uses masonry column layout (default: 'square') */
-  aspectRatio?: "square" | "native";
+  /** Aspect ratio mode: 'square' crops to 1:1, 'native' uses masonry column layout, 'native-rows' uses CSS Grid rows with native aspect ratios (default: 'square') */
+  aspectRatio?: "square" | "native" | "native-rows";
 }
 
 const {
@@ -78,7 +78,27 @@ const masonryItemGap: Record<string, string> = {
 };
 ---
 
-{aspectRatio === "native" ? (
+{aspectRatio === "native-rows" ? (
+  <!-- NATIVE-ROWS MODE: CSS Grid with native aspect ratios (clean rows, last row left-aligned) -->
+  <div
+    class={`not-prose grid ${gridCols} ${gridGap} items-start px-4 sm:px-6 py-3 ${className || ""}`}
+  >
+    {images.map(({ image, alt, description }, index) => (
+      <div class={enableClickToEnlarge ? '' : 'overflow-hidden rounded-lg'}>
+        <Img
+          src={image}
+          alt={alt}
+          description={description}
+          class="w-full h-auto object-cover transition-transform duration-300 group-hover/image:scale-105"
+          width="100%"
+          sizes={imageSizes}
+          loading={index <= cols * 2 ? "eager" : "lazy"}
+          enableClickToEnlarge={enableClickToEnlarge}
+        />
+      </div>
+    ))}
+  </div>
+) : aspectRatio === "native" ? (
   <!-- MASONRY MODE: CSS columns for true masonry layout -->
   <div
     class={`not-prose ${masonryColCount[cols] ?? masonryColCount[4]} ${gridGap} px-4 sm:px-6 py-3 ${className || ""}`}

src/components/reusable/MediaAccordion.astro

@@ -20,11 +20,13 @@ interface Props {
   cols?: 2 | 3 | 4 | 5 | 6;
   /** Gap between images (default: 'md') */
   gap?: "sm" | "md" | "lg";
+  /** Aspect ratio mode for the inner ImageGrid (default: 'native' masonry) */
+  aspectRatio?: "square" | "native" | "native-rows";
   /** Locale for translated UI strings */
   locale?: Locale;
 }
 
-const { title, images, class: className, cols = 4, gap = "md", locale = "en" } = Astro.props;
+const { title, images, class: className, cols = 4, gap = "md", aspectRatio = "native", locale = "en" } = Astro.props;
 const thisIsLabel = mediaUiStrings[locale]['this-is'];
 const sectionId = `media-${title.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')}`;
 
@@ -55,13 +57,13 @@ const fitsInOneRow = images.length <= effectiveCols;
         cols={effectiveCols}
         gap={gap}
         enableClickToEnlarge={true}
-        aspectRatio="native"
+        aspectRatio={aspectRatio}
       />
     </div>
   </div>
 ) : (
   <div id={sectionId} class={`media-accordion rounded-lg overflow-hidden scroll-mt-20 ${className || ""}`}>
-    <CollapsibleImageGrid images={images} cols={effectiveCols} gap={gap} previewRows={1}>
+    <CollapsibleImageGrid images={images} cols={effectiveCols} gap={gap} aspectRatio={aspectRatio} previewRows={1}>
       <Fragment slot="header">
         {/* Accordion Header */}
         <button

src/pages/media.astro

@@ -25,7 +25,7 @@ const visibility = (await getEntry('media-section-visibility', 'settings'))!.dat
 let pageContent: Awaited<ReturnType<typeof getPageContent>> = undefined;
 let heroImage: ImageMetadata | null = null;
 let heroAlt = "";
-const displayCategories: { label: string; images: ImageWithAlt[] }[] = [];
+const displayCategories: { id: string; label: string; images: ImageWithAlt[] }[] = [];
 
 if (visibility.showMediaPage) {
   pageContent = await getPageContent('media/media-title', locale);
@@ -94,12 +94,12 @@ if (visibility.showMediaPage) {
   for (const cat of contentCategories) {
     if (cat.id === 'all') {
       if (allImages.length > 0) {
-        displayCategories.push({ label: allEntry!.label, images: allImages });
+        displayCategories.push({ id: 'all', label: allEntry!.label, images: allImages });
       }
     } else {
       const loaded = categoriesWithImages.find((c) => c.id === cat.id);
       if (loaded) {
-        displayCategories.push({ label: loaded.label, images: loaded.images });
+        displayCategories.push({ id: loaded.id, label: loaded.label, images: loaded.images });
       }
     }
   }
@@ -128,6 +128,7 @@ if (visibility.showMediaPage) {
                 images={category.images}
                 cols={4}
                 gap="md"
+                aspectRatio={category.id === 'people' ? 'native-rows' : 'native'}
                 locale={locale}
               />
             ))