From e4e74a9059c275b8db6e9f63ced365d87e9d8e2f Mon Sep 17 00:00:00 2001
From: "Ryan Salazar (via Claude)" <ryan.salazar@relevantmediaproperties.com>
Date: Sat, 16 May 2026 09:36:07 +0000
Subject: [PATCH] home: add horizontal divider line in Featured section header
 (matches The Latest)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switches the Featured header row from justify-between to gap-3 + flex-wrap
so a 1px <div className="flex-1 h-px bg-[#2a2a2a]" /> can fill between the
label and the "All featured →" link. Same rhythm as The Latest header in
ArticleFeed.tsx:276-277.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/FeaturedBentoFromDb.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index b74d434..0146f9d 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -60,11 +60,12 @@ export default async function FeaturedBento() {
 
   return (
     <section className="max-w-container mx-auto px-4 my-8" aria-label="Featured stories">
-      <div className="flex items-center justify-between mb-3">
-        <h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280]">
+      <div className="flex items-center gap-3 mb-3 flex-wrap">
+        <h2 className="font-mono text-xs uppercase tracking-wider text-[#6b7280] whitespace-nowrap">
           Featured · staff editorial
         </h2>
-        <Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline">
+        <div className="flex-1 h-px bg-[#2a2a2a]" />
+        <Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline whitespace-nowrap">
           All featured →
         </Link>
       </div>