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.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user