From 7268fdda0937a88736d6c77e79dfcafcae1da69b Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 20:35:36 +0000
Subject: [PATCH] Adjust layout for media outlets to reduce spacing and add
 tags

Modify MediaOutlet component to reduce padding, margins, and image sizes, and integrate outlet tags.

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/gVirbWH
---
 client/src/pages/MediaOutlet.tsx | 56 +++++++++++++++++---------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index ad3d731..ea0aafe 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -172,11 +172,11 @@ export default function MediaOutlet() {
           </div>
         </header>
 
-        <div className="max-w-7xl mx-auto px-6 py-8">
+        <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="animate-pulse">
-            <div className="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
-            <div className="h-4 bg-gray-200 rounded w-2/3 mb-8"></div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="h-8 bg-gray-200 rounded w-1/3 mb-2"></div>
+            <div className="h-4 bg-gray-200 rounded w-2/3 mb-4"></div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="h-64 bg-gray-200 rounded-xl"></div>
               ))}
@@ -283,42 +283,46 @@ export default function MediaOutlet() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-6 py-8">
+      <main className="max-w-7xl mx-auto px-6 py-4">
         {/* Outlet Header */}
-        <div className="mb-8">
-          <div className="flex items-start space-x-6 mb-6">
+        <div className="mb-4">
+          <div className="flex items-start space-x-4 mb-3">
             {outlet.imageUrl ? (
               <img 
                 src={outlet.imageUrl} 
                 alt={outlet.name}
-                className="w-20 h-20 rounded-full object-cover"
+                className="w-16 h-16 rounded-full object-cover"
               />
             ) : (
-              <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
-                <span className="text-gray-600 font-bold text-2xl">
+              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
+                <span className="text-gray-600 font-bold text-xl">
                   {outlet.name.charAt(0)}
                 </span>
               </div>
             )}
             
             <div className="flex-1">
-              <h1 className="text-3xl font-bold mb-2">{outlet.name}</h1>
-              <p className="text-lg text-gray-600 mb-4">{outlet.description}</p>
-              <div className="flex items-center space-x-2 mb-4">
+              <div className="flex items-center space-x-2 mb-2">
+                <h1 className="text-2xl font-bold">{outlet.name}</h1>
                 <Badge variant="secondary" className="capitalize">
                   {outlet.category}
                 </Badge>
-                {outlet.tags?.map((tag) => (
-                  <Badge key={tag} variant="outline">
-                    {tag}
-                  </Badge>
-                ))}
               </div>
+              <p className="text-gray-600 mb-2">{outlet.description}</p>
+              {outlet.tags && outlet.tags.length > 0 && (
+                <div className="flex items-center space-x-2 mb-2">
+                  {outlet.tags.map((tag) => (
+                    <Badge key={tag} variant="outline">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              )}
               
               {/* Auction Section */}
               {!auctionLoading && auction ? (
                 <Card className="border-orange-200 bg-orange-50">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center space-x-4">
                         <div className="flex items-center space-x-2">
@@ -347,7 +351,7 @@ export default function MediaOutlet() {
                 </Card>
               ) : !auctionLoading && !auction ? (
                 <Card className="border-gray-200 bg-gray-50">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center space-x-2">
                         <Gavel className="h-5 w-5 text-gray-500" />
@@ -366,7 +370,7 @@ export default function MediaOutlet() {
                 </Card>
               ) : (
                 <Card className="border-gray-200 bg-gray-50">
-                  <CardContent className="p-4">
+                  <CardContent className="p-3">
                     <div className="flex items-center space-x-2">
                       <div className="animate-pulse flex space-x-4">
                         <div className="rounded-full bg-gray-300 h-5 w-5"></div>
@@ -381,9 +385,9 @@ export default function MediaOutlet() {
         </div>
 
         {/* Articles Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <h2 className="text-2xl font-bold">Latest Articles</h2>
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-xl font-bold">Latest Articles</h2>
             <div className="flex items-center space-x-2">
               <Button
                 variant={viewMode === "grid" ? "default" : "outline"}
@@ -407,7 +411,7 @@ export default function MediaOutlet() {
           </div>
 
           {articlesLoading ? (
-            <div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse">
                   <div className="h-40 bg-gray-200 rounded mb-4"></div>
@@ -417,7 +421,7 @@ export default function MediaOutlet() {
               ))}
             </div>
           ) : articles.length > 0 ? (
-            <div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
+            <div className={`grid gap-4 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
               {articles.map((article) => (
                 <ArticleCard 
                   key={article.id}