From d9e9179840aa3eecb93e17c7cfbdb2676ebe2d25 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 6 Mar 2026 15:40:34 +0000
Subject: [PATCH] Update article display to match video page layout

Modify the category page to use a compact card layout, showing image, title, and date, similar to the video page. Adjust grid columns for responsive display and update styling for article cards.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1ef9c23a-fb77-4dcd-8ca9-040329672db4
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/category.tsx | 46 ++++++++++++-----------------------
 1 file changed, 15 insertions(+), 31 deletions(-)

diff --git a/client/src/pages/category.tsx b/client/src/pages/category.tsx
index 5d71cbf..daefe7d 100644
--- a/client/src/pages/category.tsx
+++ b/client/src/pages/category.tsx
@@ -149,46 +149,30 @@ export default function CategoryPage() {
           </div>
         ) : data && data.articles.length > 0 ? (
           <>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
               {data.articles.flatMap((article, index) => {
                 const items = [
                   <Link key={article.id} href={`/article/${article.slug}`}>
                     <article
-                      className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full"
+                      className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
                       data-testid={`card-article-${article.id}`}
                     >
-                      <div className="relative rounded-t-md">
-                        <div className="overflow-hidden rounded-t-md">
-                          <img
-                            src={article.coverImage || "/images/article-1.jpg"}
-                            alt={article.title}
-                            className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
-                            style={{ objectPosition: "center 25%" }}
-                            loading="lazy"
-                          />
-                        </div>
+                      <div className="overflow-hidden rounded-t-md">
+                        <img
+                          src={article.coverImage || "/images/article-1.jpg"}
+                          alt={article.title}
+                          className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+                          style={{ objectPosition: "center 25%" }}
+                          loading="lazy"
+                        />
                       </div>
-                      <div className="p-4">
-                        <div className="flex items-center gap-2 text-muted-foreground text-xs mb-2">
-                          <span>{article.author}</span>
-                          <span>&middot;</span>
-                          <span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
-                        </div>
-                        <h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                      <div className="p-4 flex flex-col flex-1">
+                        <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
                           {article.title}
                         </h3>
-                        <p className="text-muted-foreground text-sm line-clamp-3 mb-3">
-                          {article.excerpt}
-                        </p>
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="flex items-center gap-1 text-xs text-muted-foreground">
-                            <Eye className="w-3.5 h-3.5" />
-                            {article.views.toLocaleString()}
-                          </span>
-                          <Button size="sm" data-testid={`button-read-${article.id}`}>
-                            Weiterlesen
-                          </Button>
-                        </div>
+                        <span className="text-muted-foreground text-xs">
+                          {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
+                        </span>
                       </div>
                     </article>
                   </Link>,