From cb75742eea4d68e4c1ce0d607a30c09892352090 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Sun, 12 Oct 2025 08:16:05 +0000
Subject: [PATCH] Align auction page elements for consistent layout

Update the main content wrapper in `Auctions.tsx` to use `max-w-7xl` and `mx-auto` for centering, and adjust padding to ensure consistent alignment with other page elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aabe2db1-f078-4501-aab5-be145ebc6b9a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/aabe2db1-f078-4501-aab5-be145ebc6b9a/TqVS1Ec
---
 .replit                       |   8 ++
 client/src/pages/Auctions.tsx | 192 +++++++++++++++++-----------------
 2 files changed, 105 insertions(+), 95 deletions(-)

diff --git a/.replit b/.replit
index bb783a3..2bb0dc1 100644
--- a/.replit
+++ b/.replit
@@ -18,6 +18,10 @@ externalPort = 80
 localPort = 34047
 externalPort = 3002
 
+[[ports]]
+localPort = 36309
+externalPort = 5173
+
 [[ports]]
 localPort = 37531
 externalPort = 3001
@@ -26,6 +30,10 @@ externalPort = 3001
 localPort = 38387
 externalPort = 3003
 
+[[ports]]
+localPort = 41465
+externalPort = 5000
+
 [[ports]]
 localPort = 43349
 externalPort = 3000
diff --git a/client/src/pages/Auctions.tsx b/client/src/pages/Auctions.tsx
index ef33b10..e082a49 100644
--- a/client/src/pages/Auctions.tsx
+++ b/client/src/pages/Auctions.tsx
@@ -409,106 +409,108 @@ export default function Auctions() {
         </div>
       </header>
 
-      <main className="flex-1 px-6 py-3 pb-32 w-full">
-        {/* Auction Explanation */}
-        <div className="mb-4">
-          <Card>
-            <CardContent className="p-3">
-              <h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
-                <div>
-                  <h4 className="font-medium mb-1">Bid Amount</h4>
-                  <p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
-                </div>
-                <div>
-                  <h4 className="font-medium mb-1">Quality Score</h4>
-                  <p className="text-gray-600">Platform assessment of your content quality and engagement</p>
-                </div>
-                <div>
-                  <h4 className="font-medium mb-1">Final Ranking</h4>
-                  <p className="text-gray-600">Combination of bid amount and quality score</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Auctions Grid */}
-        {auctionsLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Card key={i}>
-                <CardContent className="p-6 animate-pulse">
-                  <div className="h-20 bg-muted rounded mb-4"></div>
-                  <div className="space-y-3">
-                    <div className="h-4 bg-muted rounded"></div>
-                    <div className="h-4 bg-muted rounded"></div>
-                    <div className="h-4 bg-muted rounded"></div>
+      <main className="flex-1 w-full">
+        <div className="max-w-7xl mx-auto px-4 py-3 pb-32">
+          {/* Auction Explanation */}
+          <div className="mb-4">
+            <Card>
+              <CardContent className="p-3">
+                <h3 className="font-semibold mb-2 text-sm">How Auctions Work</h3>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
+                  <div>
+                    <h4 className="font-medium mb-1">Bid Amount</h4>
+                    <p className="text-gray-600">Your maximum willingness to pay for editorial control</p>
                   </div>
-                  <div className="h-10 bg-muted rounded mt-4"></div>
-                </CardContent>
-              </Card>
-            ))}
+                  <div>
+                    <h4 className="font-medium mb-1">Quality Score</h4>
+                    <p className="text-gray-600">Platform assessment of your content quality and engagement</p>
+                  </div>
+                  <div>
+                    <h4 className="font-medium mb-1">Final Ranking</h4>
+                    <p className="text-gray-600">Combination of bid amount and quality score</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
           </div>
-        ) : auctions.length === 0 ? (
-          <Card>
-            <CardContent className="p-12 text-center">
-              <i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
-              <h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
-              <p className="text-muted-foreground">
-                There are currently no active media outlet auctions. Check back later for new opportunities!
-              </p>
-            </CardContent>
-          </Card>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {auctions.map((auction) => {
-              const status = getStatusBadge(auction);
-              return (
-                <Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
-                  <CardContent className="p-6">
-                    <div className="flex items-start justify-between mb-4">
-                      <div>
-                        <h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
-                      </div>
-                      <Badge variant={status.variant}>{status.text}</Badge>
+
+          {/* Auctions Grid */}
+          {auctionsLoading ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <Card key={i}>
+                  <CardContent className="p-6 animate-pulse">
+                    <div className="h-20 bg-muted rounded mb-4"></div>
+                    <div className="space-y-3">
+                      <div className="h-4 bg-muted rounded"></div>
+                      <div className="h-4 bg-muted rounded"></div>
+                      <div className="h-4 bg-muted rounded"></div>
                     </div>
-                    
-                    <div className="space-y-3 mb-4">
-                      <div className="flex justify-between">
-                        <span className="text-sm text-muted-foreground">Current Bid:</span>
-                        <span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-muted-foreground">Quality Score:</span>
-                        <span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-muted-foreground">Duration:</span>
-                        <span className="font-semibold">{auction.duration || 30} days</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm text-muted-foreground">Time Remaining:</span>
-                        <span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
-                          {getTimeRemaining(auction.endDate)}
-                        </span>
-                      </div>
-                    </div>
-                    
-                    <Button 
-                      className="w-full bg-gray-600 hover:bg-gray-700 text-white" 
-                      onClick={() => handleBidClick(auction)}
-                      disabled={getTimeRemaining(auction.endDate) === "Ended"}
-                      data-testid={`button-bid-${auction.id}`}
-                    >
-                      {getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
-                    </Button>
+                    <div className="h-10 bg-muted rounded mt-4"></div>
                   </CardContent>
                 </Card>
-              );
-            })}
-          </div>
-        )}
+              ))}
+            </div>
+          ) : auctions.length === 0 ? (
+            <Card>
+              <CardContent className="p-12 text-center">
+                <i className="fas fa-gavel text-4xl text-muted-foreground mb-4"></i>
+                <h3 className="text-xl font-semibold mb-2">No Active Auctions</h3>
+                <p className="text-muted-foreground">
+                  There are currently no active media outlet auctions. Check back later for new opportunities!
+                </p>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {auctions.map((auction) => {
+                const status = getStatusBadge(auction);
+                return (
+                  <Card key={auction.id} data-testid={`card-auction-${auction.id}`}>
+                    <CardContent className="p-6">
+                      <div className="flex items-start justify-between mb-4">
+                        <div>
+                          <h3 className="font-semibold text-lg line-clamp-1">{getMediaOutletName(auction.mediaOutletId)}</h3>
+                        </div>
+                        <Badge variant={status.variant}>{status.text}</Badge>
+                      </div>
+                      
+                      <div className="space-y-3 mb-4">
+                        <div className="flex justify-between">
+                          <span className="text-sm text-muted-foreground">Current Bid:</span>
+                          <span className="font-semibold">{formatPrice(auction.currentBid || "0")}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-sm text-muted-foreground">Quality Score:</span>
+                          <span className="font-semibold text-gray-900">{auction.qualityScore || 0}/100</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-sm text-muted-foreground">Duration:</span>
+                          <span className="font-semibold">{auction.duration || 30} days</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-sm text-muted-foreground">Time Remaining:</span>
+                          <span className={`font-semibold ${status.variant === 'destructive' ? 'text-destructive' : ''}`}>
+                            {getTimeRemaining(auction.endDate)}
+                          </span>
+                        </div>
+                      </div>
+                      
+                      <Button 
+                        className="w-full bg-gray-600 hover:bg-gray-700 text-white" 
+                        onClick={() => handleBidClick(auction)}
+                        disabled={getTimeRemaining(auction.endDate) === "Ended"}
+                        data-testid={`button-bid-${auction.id}`}
+                      >
+                        {getTimeRemaining(auction.endDate) === "Ended" ? "Auction Ended" : "Place Bid"}
+                      </Button>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+        </div>
       </main>
 
       {/* Bid Modal */}