From 8df6d15b19a02dc3fbadb726c1ef8c25eb595024 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:39:44 +0100
Subject: [PATCH] refactor: update content card and list layout for better
 responsiveness

- Removed unused aspect-video class from content card layout.
- Improved content list layout by switching to a responsive grid system.
---
 frontend/src/components/content-card.tsx | 2 +-
 frontend/src/components/content-list.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/content-card.tsx b/frontend/src/components/content-card.tsx
index 75c4de1..30794d9 100644
--- a/frontend/src/components/content-card.tsx
+++ b/frontend/src/components/content-card.tsx
@@ -158,7 +158,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center">
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
 					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
 						{content.mimeType.startsWith("image/") ? (
 							<Image
diff --git a/frontend/src/components/content-list.tsx b/frontend/src/components/content-list.tsx
index 7959f90..1410f96 100644
--- a/frontend/src/components/content-list.tsx
+++ b/frontend/src/components/content-list.tsx
@@ -68,9 +68,9 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	});
 
 	return (
-		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
+		<div className="max-w-7xl mx-auto py-8 px-4 space-y-8">
 			{title && <h1 className="text-2xl font-bold">{title}</h1>}
-			<div className="flex flex-col gap-6">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 				{contents.map((content) => (
 					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
 				))}