From d20f405a68b4c8e712ddfcc7d474f4a5c7211b3c Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 15 Oct 2025 04:32:59 +0000
Subject: [PATCH] Adjust media outlet name display to appear below the logo

Modify the UI in Community, MediaOutlet, and Report components to stack the SAPIENS logo and media outlet name vertically, and adjust font sizes and button dimensions for better layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/cEkjo93
---
 client/src/pages/Community.tsx   | 10 +++++-----
 client/src/pages/MediaOutlet.tsx | 10 +++++-----
 client/src/pages/Report.tsx      | 10 +++++-----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/pages/Community.tsx b/client/src/pages/Community.tsx
index 3889a48..58dc93a 100644
--- a/client/src/pages/Community.tsx
+++ b/client/src/pages/Community.tsx
@@ -136,15 +136,15 @@ export default function Community() {
                   </span>
                 </div>
               )}
-              <div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation(`/media/${slug}`)}>
+              <div className="flex flex-col cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation(`/media/${slug}`)}>
                 <img 
                   src="/attached_assets/logo_black_1759162717640.png" 
                   alt="SAPIENS" 
-                  className="h-7 w-auto"
+                  className="h-7 w-auto mb-1"
                   data-testid="logo-sapiens"
                 />
                 <div className="flex items-center space-x-1.5">
-                  <span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
+                  <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
                     {outlet.name}
                   </span>
                   <Button
@@ -154,11 +154,11 @@ export default function Community() {
                       e.stopPropagation();
                       setLocation(`/media/${outlet.slug}/report`);
                     }}
-                    className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                    className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
                     aria-label="View complete profile"
                     data-testid="button-profile"
                   >
-                    <IdCard className="h-3.5 w-3.5" />
+                    <IdCard className="h-3 w-3" />
                     <span>About</span>
                   </Button>
                 </div>
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 5cbef20..77c009a 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -207,15 +207,15 @@ export default function MediaOutlet() {
                   </span>
                 </div>
               )}
-              <div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
+              <div className="flex flex-col cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
                 <img 
                   src="/attached_assets/logo_black_1759162717640.png" 
                   alt="SAPIENS" 
-                  className="h-7 w-auto"
+                  className="h-7 w-auto mb-1"
                   data-testid="logo-sapiens"
                 />
                 <div className="flex items-center space-x-1.5">
-                  <span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
+                  <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
                     {outlet.name}
                   </span>
                   <Button
@@ -225,11 +225,11 @@ export default function MediaOutlet() {
                       e.stopPropagation();
                       setLocation(`/media/${outlet.slug}/report`);
                     }}
-                    className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                    className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
                     aria-label="View complete profile"
                     data-testid="button-profile"
                   >
-                    <IdCard className="h-3.5 w-3.5" />
+                    <IdCard className="h-3 w-3" />
                     <span>About</span>
                   </Button>
                 </div>
diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index 503c1fb..2269f4e 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -473,15 +473,15 @@ export default function Report() {
                       </span>
                     </div>
                   )}
-                  <div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
+                  <div className="flex flex-col cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
                     <img 
                       src="/attached_assets/logo_black_1759162717640.png" 
                       alt="SAPIENS" 
-                      className="h-7 w-auto"
+                      className="h-7 w-auto mb-1"
                       data-testid="logo-sapiens"
                     />
                     <div className="flex items-center space-x-1.5">
-                      <span className="text-lg font-bold text-gray-900" data-testid="text-outlet-name-header">
+                      <span className="text-sm font-semibold text-gray-700" data-testid="text-outlet-name-header">
                         {outlet.name}
                       </span>
                       <Button
@@ -491,11 +491,11 @@ export default function Report() {
                           e.stopPropagation();
                           setLocation(`/media/${outlet.slug}/report`);
                         }}
-                        className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                        className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
                         aria-label="View complete profile"
                         data-testid="button-profile"
                       >
-                        <IdCard className="h-3.5 w-3.5" />
+                        <IdCard className="h-3 w-3" />
                         <span>About</span>
                       </Button>
                     </div>