Mathis/memegoat
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Activity

refactor: update content card and list layout for better responsiveness

Browse Source 
- Removed unused aspect-video class from content card layout.
- Improved content list layout by switching to a responsive grid system.
This commit is contained in:
Mathis HERRIOT
2026-01-28 15:39:44 +01:00
parent 0144421f03
commit 8df6d15b19
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/content-card.tsx
View File

@@ -158,7 +158,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
</DropdownMenu> </DropdownMenu>
</div> </div>
</CardHeader> </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"> <Link href={`/meme/${content.slug}`} className="w-full h-full relative">
{content.mimeType.startsWith("image/") ? ( {content.mimeType.startsWith("image/") ? (
<Image <Image

4
frontend/src/components/content-list.tsx
View File

@@ -68,9 +68,9 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
}); });
return ( 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>} {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) => ( {contents.map((content) => (
<ContentCard key={content.id} content={content} onUpdate={fetchInitial} /> <ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
))} ))}