Make grid slightly better

1 files changed, 26 insertions, 8 deletions

diff --git a/src/loaders/pleroma.ts b/src/loaders/pleroma.ts
index 853c888..d633aa0 100644
--- a/src/loaders/pleroma.ts
+++ b/src/loaders/pleroma.ts
@@ -521,19 +521,37 @@ function cleanContent(htmlContent: string): string {
  */
 function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string {
 	const imageAttachments = attachments.filter((attachment) => attachment.type === "image");
+	const count = imageAttachments.length;
 
-	if (imageAttachments.length === 0) {
+	if (count === 0) {
 		return "";
 	}
 
-	return `
-<div class="mt-4 mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
-${imageAttachments
-	.map((attachment) => {
+	// Single image - no grid, full width
+	if (count === 1 && imageAttachments[0]) {
+		const attachment = imageAttachments[0];
 		const description = attachment.description || "Image";
-		return `<img src="${attachment.url}" alt="${description}" class="h-48 w-full cursor-zoom-in rounded-lg border border-gray-200 object-cover transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable />`;
-	})
-	.join("\n")}
+		return `
+<div class="mt-4 mb-4">
+<img src="${attachment.url}" alt="${description}" class="w-full cursor-zoom-in rounded-lg border border-gray-200 object-cover transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable />
+</div>`;
+	}
+
+	// 2+ images - use grid with max 2 columns
+	const isOdd = count % 2 !== 0;
+	const images = imageAttachments
+		.map((attachment, index) => {
+			const description = attachment.description || "Image";
+			// For odd count, the last image spans all columns
+			const isLastImage = index === count - 1;
+			const spanClass = isOdd && isLastImage ? "sm:col-span-2" : "";
+			return `<img src="${attachment.url}" alt="${description}" class="w-full max-h-96 object-cover cursor-zoom-in rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 ${spanClass}" loading="lazy" data-zoomable />`;
+		})
+		.join("\n");
+
+	return `
+<div class="mt-4 mb-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
+${images}
 </div>`;
 }