Add pseudo-random aspect ratio variation to break up uniform grid layouts

src/components/MediaTile.tsx

@@ -43,14 +43,19 @@ export default function MediaTile({ item, index, onClick, votingOpen }: MediaTil
   const defaultRatio = 1.5;
   const ratio = (item.width && item.height) ? item.width / item.height : defaultRatio;
 
+  // Add deterministic random variation (between 0.85 and 1.15) to break up perfect grids 
+  // when many photos have the exact same format (like photobooth photos)
+  const randomFactor = 0.85 + ((item.id * 137) % 31) / 100;
+  const displayRatio = ratio * randomFactor;
+
   // By using flexGrow and flexBasis proportional to the aspect ratio,
   // Flexbox will distribute the items so that ALL items in the same row
   // end up with the EXACT same height! 
   // We use a CSS variable for the target row height to make it responsive.
   const style: React.CSSProperties = {
-    flexGrow: ratio,
+    flexGrow: displayRatio,
-    flexShrink: ratio,
+    flexShrink: displayRatio,
-    flexBasis: `calc(${ratio} * var(--target-row-height))`,
+    flexBasis: `calc(${displayRatio} * var(--target-row-height))`,
   };
 
   const isVideo = item.mediaType === 'VIDEO';
@@ -69,7 +74,7 @@ export default function MediaTile({ item, index, onClick, votingOpen }: MediaTil
         This padding block forces the container to strictly maintain its aspect ratio.
         Since flexbox assigns the width, the height is automatically derived from it.
       */}
-      <div style={{ display: 'block', paddingTop: `${(1 / ratio) * 100}%` }} />
+      <div style={{ display: 'block', paddingTop: `${(1 / displayRatio) * 100}%` }} />
       {isVisible && (
         <>
           {/* eslint-disable-next-line @next/next/no-img-element */}