Improve visual layout and aspect ratio for Mohamed Salah report slides

Adjust image and text spacing, and fix image aspect ratio to 16:9 in the Mohamed Salah report slides.

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/yjv3HO6

.replit

@@ -34,6 +34,10 @@ externalPort = 3003
 localPort = 41425
 externalPort = 6000
 
+[[ports]]
+localPort = 42463
+externalPort = 5000
+
 [[ports]]
 localPort = 43349
 externalPort = 3000

client/src/pages/Report.tsx

@@ -208,23 +208,25 @@ function MohamedSalahSlides() {
 
   return (
     <div className="space-y-6">
-      <Card className={`${slides[currentSlide].bgColor || 'bg-white'}`}>
-        <CardContent className={`p-12 ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'}`}>
-          <div className="min-h-[400px] flex flex-col justify-center">
-            <h2 className="text-4xl font-bold mb-4" data-testid="text-slide-title">
-              {slides[currentSlide].title}
-            </h2>
-            {slides[currentSlide].subtitle && (
-              <p className="text-xl opacity-90 mb-6">{slides[currentSlide].subtitle}</p>
-            )}
-            {slides[currentSlide].content && (
-              <div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-6 rounded-lg' : ''}>
-                {slides[currentSlide].content}
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
+      <div className="w-full relative overflow-hidden" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9">
+        <Card className={`${slides[currentSlide].bgColor || 'bg-white'} absolute inset-0`}>
+          <CardContent className={`p-6 h-full ${slides[currentSlide].bgColor ? 'text-white' : 'text-gray-900'} overflow-auto`}>
+            <div className="h-full flex flex-col justify-center">
+              <h2 className="text-2xl font-bold mb-2" data-testid="text-slide-title">
+                {slides[currentSlide].title}
+              </h2>
+              {slides[currentSlide].subtitle && (
+                <p className="text-base opacity-90 mb-3">{slides[currentSlide].subtitle}</p>
+              )}
+              {slides[currentSlide].content && (
+                <div className={slides[currentSlide].bgColor ? 'bg-white/10 backdrop-blur p-3 rounded-lg text-sm' : 'text-sm'}>
+                  {slides[currentSlide].content}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
       <div className="flex items-center justify-between">
         <Button
@@ -329,6 +331,11 @@ export default function Report() {
             padding: 56px !important;
             max-width: 1000px !important;
             margin: 0 auto !important;
+            text-align: center !important;
+          }
+          
+          .sapiens-report-wrapper p {
+            text-align: justify !important;
           }
           
           h1 {
@@ -379,6 +386,11 @@ export default function Report() {
             text-align: justify !important;
           }
           
+          p + img,
+          img + p {
+            margin-top: 24px !important;
+          }
+          
           .metadata {
             background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
             padding: 24px !important;
@@ -436,7 +448,10 @@ export default function Report() {
             height: auto !important;
             border-radius: 12px !important;
             box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15) !important;
-            margin: 20px 0 !important;
+            margin: 32px auto !important;
+            display: block !important;
+            clear: both !important;
+            float: none !important;
           }
           
           table {