From 49689c84504a4805f855b75b727aa7d94f0fec72 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 17:43:48 +0000
Subject: [PATCH] Organize content into three distinct columns for better
 readability

Update MainContent.tsx to use a grid layout for displaying people, topics, and companies, improving visual organization and structure.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/LZrXNFV
---
 client/src/components/MainContent.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index f13dfb7..89a718d 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -75,11 +75,11 @@ export default function MainContent() {
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 py-4">
         {isLoading ? (
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {categories.map((category) => (
               <div key={category.id}>
                 <h2 className="text-xl font-bold text-gray-900 mb-2">{category.name}</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+                <div className="space-y-2">
                   {Array.from({ length: 8 }).map((_, i) => (
                     <Card key={i} className="animate-pulse">
                       <CardContent className="p-2">
@@ -98,14 +98,14 @@ export default function MainContent() {
             ))}
           </div>
         ) : (
-          <div className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* People Section */}
             <div data-testid="section-people">
               <h2 className="text-xl font-bold text-gray-900 mb-2">
                 People 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("People").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+              <div className="space-y-2">
                 {getOutletsByCategory("People").map(renderOutletCard)}
               </div>
             </div>
@@ -116,7 +116,7 @@ export default function MainContent() {
                 Topics 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Topics").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+              <div className="space-y-2">
                 {getOutletsByCategory("Topics").map(renderOutletCard)}
               </div>
             </div>
@@ -127,7 +127,7 @@ export default function MainContent() {
                 Companies 
                 <span className="text-gray-400 text-base ml-2">({getOutletsByCategory("Companies").length})</span>
               </h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+              <div className="space-y-2">
                 {getOutletsByCategory("Companies").map(renderOutletCard)}
               </div>
             </div>