Adjust blog post layout for improved sidebar display

Update the home page to display featured articles in a more compact format within the sidebar, optimizing space and readability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0c24e929-14aa-4f34-9d32-e0e4e0019dc7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -566,7 +566,17 @@ export default function Home() {
             <SidebarWeatherWidget />
             {articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 5)} />}
             {widePickedArticles.map((a) => (
-              <SideCard key={`side-top-${a.id}`} article={a} focalPoints={focalPoints} />
+              <Link key={`side-top-${a.id}`} href={`/article/${a.slug}`}>
+                <div className="group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border" data-testid={`card-sidebar-${a.id}`}>
+                  <div className="aspect-video overflow-hidden">
+                    <img src={thumbUrl(a.coverImage)} alt={a.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+                  </div>
+                  <div className="p-2.5">
+                    <span className="text-[10px] text-primary font-medium">{a.author}</span>
+                    <h4 className="text-xs font-bold text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug mt-0.5">{a.title}</h4>
+                  </div>
+                </div>
+              </Link>
             ))}
             <SidebarAd />
           </div>