localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bento: lock left column to 600px so 3-up rail bottom aligns w/ 300x600

Browse Source 
Previously the rail row could drift past the bottom of the Blackmagic
banner by ~17px depending on title length. Left column is now pinned to
lg:h-[600px] (matching the right column 300x600), and the rail grid uses
flex-1 min-h-0 to absorb the remaining vertical space after the hero
takes its natural aspect-ratio height. Each card switches to a flex
column with the image flex-shrink-0 and the text area flex-1
overflow-hidden so the bottom edge lines up perfectly regardless of
title/category length.

Also tightened the title clamp from line-clamp-3 to line-clamp-2 since
the card height is now bounded.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-29 13:31:46 +00:00
parent cc76c21c24
commit dd2a8c8da7
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/FeaturedBentoFromDb.tsx
View File

@@ -85,7 +85,7 @@ export default async function FeaturedBento() {
start at the very top of the row, baseline-aligned with the hero. start at the very top of the row, baseline-aligned with the hero.
Mobile collapses to single column (banner hidden via lg:block). */} Mobile collapses to single column (banner hidden via lg:block). */}
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start"> <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start">
<div className="flex flex-col gap-4 min-w-0"> <div className="flex flex-col gap-3 min-w-0 lg:h-[600px]">
{/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */} {/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
<Link <Link
href={`/news/${hero.wp_slug}`} href={`/news/${hero.wp_slug}`}
@@ -129,34 +129,39 @@ export default async function FeaturedBento() {
</div> </div>
</Link> </Link>
{/* 3-up rail directly under the hero, still in the left column */} {/* 3-up rail — flex-1 so it fills the exact remaining height inside
<div className="grid grid-cols-3 gap-3"> the 600px left column. Each card uses h-full + flex-col so the
image keeps its 16:10 ratio while the text area absorbs any
leftover pixels (overflow-hidden line-clamps the title cleanly).
Result: bottom edge of the rail lines up with the bottom of the
300x600 banner regardless of hero or text-content height. */}
<div className="grid grid-cols-3 gap-3 flex-1 min-h-0">
{rail.map((r) => ( {rail.map((r) => (
<Link <Link
key={r.wp_slug} key={r.wp_slug}
href={`/news/${r.wp_slug}`} href={`/news/${r.wp_slug}`}
className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors" className="group flex flex-col h-full rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
> >
<div className="aspect-[16/10] bg-[#111] relative"> <div className="aspect-[16/10] bg-[#111] relative flex-shrink-0">
<img <img
src={img(r)} src={img(r)}
alt={r.featured_image_alt || r.title} alt={r.featured_image_alt || r.title}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="p-3"> <div className="p-3 flex flex-col gap-1 flex-1 min-h-0 overflow-hidden">
<div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1"> <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)]">
{r.category || "News"} {r.category || "News"}
</div> </div>
<h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3"> <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-2">
{r.title} {r.title}
</h4> </h4>
<div className="mt-2"> <div className="mt-auto">
<StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} /> <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
</div>
</div> </div>
</div> </Link>
</Link> ))}
))}
</div> </div>
</div> </div>
<aside className="hidden lg:block" aria-label="Premium sponsor"> <aside className="hidden lg:block" aria-label="Premium sponsor">