trdna visina vrstic v mrezi 399 px, pripomocki in izvlecki omejeni, da stran ne poskakuje

This commit is contained in:
2026-08-31 17:53:04 +02:00
parent af1ab5762c
commit cc65cc16e6
+6 -3
View File
@@ -409,7 +409,7 @@ function MediumCard({ article, focalPoints, compact }: { article: Article; focal
<span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div>
<h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
<p className={`text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1 ${compact ? "line-clamp-2" : ""}`}>{article.excerpt}</p>
<p className={`text-xs text-muted-foreground mt-1.5 leading-relaxed flex-1 ${compact ? "line-clamp-2" : "line-clamp-4"}`}>{article.excerpt}</p>
<div className="flex items-center gap-2 mt-2 text-muted-foreground text-[10px]">
<Eye className="w-3 h-3" />
{article.views.toLocaleString()}
@@ -1096,10 +1096,13 @@ export default function Home() {
return (
<LazySection key={`row-group-${ri}`} minHeight="280px">
<div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Trdna visina vrstice: brez nje je vsaka vrstica visoka toliko kot
najdaljsi izvlecek v njej (izmerjeno 369, 399, 418 px) in stran
ob vsakem nalaganju poskakuje. */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:auto-rows-[399px]">
{row.map((item) =>
item.type === "widget"
? <div key={item.key}>{item.widget!.el}</div>
? <div key={item.key} className="h-full overflow-hidden">{item.widget!.el}</div>
: item.type === "ad"
? <div key={item.key} className="h-full empty:hidden" data-testid={`ad-grid-${item.key}`}><ArticleCardAd /></div>
: item.type === "video" && item.video