From 00b92a8a4501cf42c0bd7e0c553cdb9aa32d17d7 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 20:40:16 +0000
Subject: [PATCH] Improve layout and add auction functionality for media
 outlets

Refactor MainContent, AdminDashboard, and MediaOutlet components to enforce a sticky footer, adjust layout for header elements, and prepare for the integration of auction features.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/Ml7hyYJ
---
 .replit                               | 4 ++++
 client/src/components/MainContent.tsx | 4 ++--
 client/src/pages/AdminDashboard.tsx   | 6 ++++--
 client/src/pages/MediaOutlet.tsx      | 8 ++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/.replit b/.replit
index b0526f5..2c6be92 100644
--- a/.replit
+++ b/.replit
@@ -22,6 +22,10 @@ externalPort = 3002
 localPort = 37531
 externalPort = 3001
 
+[[ports]]
+localPort = 40799
+externalPort = 3003
+
 [[ports]]
 localPort = 43349
 externalPort = 3000
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index ccd4e66..360e201 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -86,8 +86,8 @@ export default function MainContent() {
   );
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-4 py-4">
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      <div className="flex-1 max-w-7xl mx-auto px-4 py-4 w-full">
         {isLoading ? (
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {categories.map((category) => (
diff --git a/client/src/pages/AdminDashboard.tsx b/client/src/pages/AdminDashboard.tsx
index a0cf14d..2f3dbfe 100644
--- a/client/src/pages/AdminDashboard.tsx
+++ b/client/src/pages/AdminDashboard.tsx
@@ -10,6 +10,7 @@ import { Search, Settings, ArrowUpDown } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import type { MediaOutlet } from "@shared/schema";
 import MediaOutletManagement from "@/components/MediaOutletManagement";
+import Footer from "@/components/Footer";
 
 export default function AdminDashboard() {
   const { user, isLoading } = useAuth();
@@ -100,7 +101,7 @@ export default function AdminDashboard() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="flex flex-col min-h-screen bg-gray-50">
       {/* Header */}
       <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-6 py-4">
@@ -155,7 +156,7 @@ export default function AdminDashboard() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-4 py-4">
+      <main className="flex-1 max-w-7xl mx-auto px-4 py-4 w-full">
         {outletsLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {Array.from({ length: 12 }).map((_, i) => (
@@ -406,6 +407,7 @@ export default function AdminDashboard() {
           </div>
         )}
       </main>
+      <Footer />
     </div>
   );
 }
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index ea0aafe..1fcabd0 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -92,7 +92,7 @@ export default function MediaOutlet() {
 
   if (outletLoading) {
     return (
-      <div className="min-h-screen bg-gray-50">
+      <div className="flex flex-col min-h-screen bg-gray-50">
         {/* Header - Same as Home */}
         <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
           <div className="max-w-7xl mx-auto px-6 py-4">
@@ -172,7 +172,7 @@ export default function MediaOutlet() {
           </div>
         </header>
 
-        <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex-1 max-w-7xl mx-auto px-6 py-4 w-full">
           <div className="animate-pulse">
             <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>
@@ -201,7 +201,7 @@ export default function MediaOutlet() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="flex flex-col min-h-screen bg-gray-50">
       {/* Header - Same as Home */}
       <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-6 py-4">
@@ -283,7 +283,7 @@ export default function MediaOutlet() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-6 py-4">
+      <main className="flex-1 max-w-7xl mx-auto px-6 py-4 w-full">
         {/* Outlet Header */}
         <div className="mb-4">
           <div className="flex items-start space-x-4 mb-3">