From f021c8de888dc38d0c9f42eb59ae54cdc06c586e Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 13 Oct 2025 09:12:35 +0000
Subject: [PATCH] Limit displayed new media outlets to a scrollable maximum of
 three items

Implement max-height and overflow-y: auto to the div wrapping the new outlets list in MainContent.tsx for "People", "Topics", and "Companies" categories.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aabe2db1-f078-4501-aab5-be145ebc6b9a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/aabe2db1-f078-4501-aab5-be145ebc6b9a/ETDmxYB
---
 client/src/components/MainContent.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index 4573700..1bc83e5 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -226,7 +226,9 @@ export default function MainContent() {
                       <Sparkles className="h-4 w-4 text-blue-500" />
                       <h3 className="text-sm font-semibold text-blue-600">NEW</h3>
                     </div>
-                    {getSeparatedOutlets("People").newOutlets.map(renderOutletCard)}
+                    <div className="max-h-[200px] overflow-y-auto space-y-2 pr-1">
+                      {getSeparatedOutlets("People").newOutlets.map(renderOutletCard)}
+                    </div>
                     {getSeparatedOutlets("People").regularOutlets.length > 0 && (
                       <div className="border-t border-gray-200 my-4"></div>
                     )}
@@ -249,7 +251,9 @@ export default function MainContent() {
                       <Sparkles className="h-4 w-4 text-blue-500" />
                       <h3 className="text-sm font-semibold text-blue-600">NEW</h3>
                     </div>
-                    {getSeparatedOutlets("Topics").newOutlets.map(renderOutletCard)}
+                    <div className="max-h-[200px] overflow-y-auto space-y-2 pr-1">
+                      {getSeparatedOutlets("Topics").newOutlets.map(renderOutletCard)}
+                    </div>
                     {getSeparatedOutlets("Topics").regularOutlets.length > 0 && (
                       <div className="border-t border-gray-200 my-4"></div>
                     )}
@@ -272,7 +276,9 @@ export default function MainContent() {
                       <Sparkles className="h-4 w-4 text-blue-500" />
                       <h3 className="text-sm font-semibold text-blue-600">NEW</h3>
                     </div>
-                    {getSeparatedOutlets("Companies").newOutlets.map(renderOutletCard)}
+                    <div className="max-h-[200px] overflow-y-auto space-y-2 pr-1">
+                      {getSeparatedOutlets("Companies").newOutlets.map(renderOutletCard)}
+                    </div>
                     {getSeparatedOutlets("Companies").regularOutlets.length > 0 && (
                       <div className="border-t border-gray-200 my-4"></div>
                     )}