From 2b85324a5e1a60f5f335791557dd5950535124fb Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 06:32:37 +0000
Subject: [PATCH] Adjust header layout to better align logos and media outlet
 names

Modify CSS classes in MediaOutlet.tsx and Report.tsx to adjust the size and alignment of the SAPIENS logo, media outlet name, and info icon within the header component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/sXqrCAq
---
 .replit                          |  4 ----
 client/src/pages/MediaOutlet.tsx | 12 ++++++------
 client/src/pages/Report.tsx      | 12 ++++++------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/.replit b/.replit
index f0f9acb..e53b196 100644
--- a/.replit
+++ b/.replit
@@ -18,10 +18,6 @@ externalPort = 80
 localPort = 34047
 externalPort = 3002
 
-[[ports]]
-localPort = 35303
-externalPort = 4200
-
 [[ports]]
 localPort = 37531
 externalPort = 3001
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index edf5cbd..b274230 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -71,10 +71,10 @@ export default function MediaOutlet() {
         <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">
             <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-3">
+              <div className="flex items-start space-x-3">
                 <div className="w-10 h-10 bg-gray-200 rounded-full animate-pulse"></div>
                 <div className="flex flex-col">
-                  <div className="h-3 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
+                  <div className="h-5 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
                   <div className="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
                 </div>
               </div>
@@ -189,7 +189,7 @@ export default function MediaOutlet() {
       <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">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-3">
+            <div className="flex items-start space-x-3">
               {outlet.imageUrl ? (
                 <img 
                   src={outlet.imageUrl} 
@@ -209,11 +209,11 @@ export default function MediaOutlet() {
                 <img 
                   src="/attached_assets/logo_black_1759162717640.png" 
                   alt="SAPIENS" 
-                  className="h-3 w-auto mb-0.5"
+                  className="h-5 w-auto mb-1"
                   data-testid="logo-sapiens"
                 />
                 <div className="flex items-center space-x-1.5">
-                  <span className="text-sm font-semibold text-gray-900" data-testid="text-outlet-name-header">
+                  <span className="text-xs font-semibold text-gray-900" data-testid="text-outlet-name-header">
                     {outlet.name}
                   </span>
                   <TooltipProvider>
@@ -226,7 +226,7 @@ export default function MediaOutlet() {
                           aria-label="View outlet information"
                         >
                           <Info 
-                            className="h-3.5 w-3.5 text-gray-500 cursor-pointer hover:text-gray-700" 
+                            className="h-3 w-3 text-gray-500 cursor-pointer hover:text-gray-700" 
                             data-testid="icon-info-header"
                           />
                         </button>
diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index ecd4aca..f6bd5ff 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -103,12 +103,12 @@ export default function Report() {
       <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">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-3">
+            <div className="flex items-start space-x-3">
               {outletLoading ? (
                 <>
                   <div className="w-10 h-10 bg-gray-200 rounded-full animate-pulse"></div>
                   <div className="flex flex-col">
-                    <div className="h-3 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
+                    <div className="h-5 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
                     <div className="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
                   </div>
                 </>
@@ -133,11 +133,11 @@ export default function Report() {
                     <img 
                       src="/attached_assets/logo_black_1759162717640.png" 
                       alt="SAPIENS" 
-                      className="h-3 w-auto mb-0.5"
+                      className="h-5 w-auto mb-1"
                       data-testid="logo-sapiens"
                     />
                     <div className="flex items-center space-x-1.5">
-                      <span className="text-sm font-semibold text-gray-900" data-testid="text-outlet-name-header">
+                      <span className="text-xs font-semibold text-gray-900" data-testid="text-outlet-name-header">
                         {outlet.name}
                       </span>
                       <TooltipProvider>
@@ -150,7 +150,7 @@ export default function Report() {
                               aria-label="View outlet information"
                             >
                               <Info 
-                                className="h-3.5 w-3.5 text-gray-500 cursor-pointer hover:text-gray-700" 
+                                className="h-3 w-3 text-gray-500 cursor-pointer hover:text-gray-700" 
                                 data-testid="icon-info-header"
                               />
                             </button>
@@ -167,7 +167,7 @@ export default function Report() {
                 <img 
                   src="/attached_assets/logo_black_1759162717640.png" 
                   alt="SAPIENS" 
-                  className="h-6 w-auto cursor-pointer"
+                  className="h-5 w-auto cursor-pointer"
                   onClick={() => setLocation("/")}
                   data-testid="logo-sapiens"
                 />