When having less than 3 sample images, add spacing to the grid so images are not huge

ui/src/components/SampleImages.tsx

@@ -154,9 +154,7 @@ export default function SampleImages({ job }: SampleImagesProps) {
 
     switch (cols) {
       case 1:
-        return 'grid-cols-1';
       case 2:
-        return 'grid-cols-2';
       case 3:
         return 'grid-cols-3';
       case 4:
@@ -234,7 +232,7 @@ export default function SampleImages({ job }: SampleImagesProps) {
       case 40:
         return 'grid-cols-40';
       default:
-        return 'grid-cols-1';
+        return 'grid-cols-3';
     }
   }, [numSamples]);
 
@@ -262,17 +260,38 @@ export default function SampleImages({ job }: SampleImagesProps) {
         {PageInfoContent}
         {sampleImages && (
           <div className={`grid ${gridColsClass} gap-1`}>
-            {sampleImages.map((sample: string) => (
+            {sampleImages.map((sample: string, idx: number) => {
-              <SampleImageCard
+              // Compute current group (groups are size = numSamples)
-                key={sample}
+              const groupIndex = Math.floor(idx / numSamples);
-                imageUrl={sample}
+              const groupStart = groupIndex * numSamples;
-                numSamples={numSamples}
+              const groupEnd = Math.min(groupStart + numSamples, sampleImages.length);
-                sampleImages={sampleImages}
+              const groupSize = groupEnd - groupStart;
-                alt="Sample Image"
+              const isEndOfGroup = idx === groupEnd - 1;
-                onClick={() => setSelectedSamplePath(sample)}
+
-                observerRoot={containerRef.current}
+              // Only enforce a MIN of 3 when the group's planned width is < 3
-              />
+              const MIN_COLS = 3;
-            ))}
+              const shouldPad = numSamples < MIN_COLS && groupSize < MIN_COLS;
+              const padsNeeded = shouldPad ? MIN_COLS - groupSize : 0;
+
+              return (
+                <div key={sample} className="contents">
+                  <SampleImageCard
+                    imageUrl={sample}
+                    numSamples={numSamples}
+                    sampleImages={sampleImages}
+                    alt="Sample Image"
+                    onClick={() => setSelectedSamplePath(sample)}
+                    observerRoot={containerRef.current}
+                  />
+
+                  {isEndOfGroup &&
+                    padsNeeded > 0 &&
+                    Array.from({ length: padsNeeded }).map((_, i) => (
+                      <div key={`pad-${groupIndex}-${i}`} className="invisible" />
+                    ))}
+                </div>
+              );
+            })}
           </div>
         )}
       </div>