From a5ea8e9b0003ac7142961e613ffbe2871e50aa8f Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 15 Oct 2025 04:31:20 +0000
Subject: [PATCH] Remove background from media slides for better presentation

Update Report.tsx to remove the background styling from the PDF slide viewer, ensuring a cleaner display.

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/Report.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx
index 1a8db7f..503c1fb 100644
--- a/client/src/pages/Report.tsx
+++ b/client/src/pages/Report.tsx
@@ -91,16 +91,16 @@ function MohamedSalahSlides() {
 
   return (
     <div className="space-y-6">
-      <div className="w-full relative overflow-hidden bg-gray-900 rounded-lg" style={{ paddingTop: '56.25%' }} data-testid="slide-container-16-9">
-        <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
-          {isLoading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-gray-900 z-10">
-              <div className="text-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-                <p className="text-gray-400" data-testid="text-loading-slides">Loading slides...</p>
-              </div>
+      <div className="w-full flex justify-center" data-testid="slide-container-16-9">
+        {isLoading && (
+          <div className="w-full flex items-center justify-center py-20">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+              <p className="text-gray-600" data-testid="text-loading-slides">Loading slides...</p>
             </div>
-          )}
+          </div>
+        )}
+        {!isLoading && (
           <Document
             file="/attached_assets/mohamed_salah_pdf_en_1760419721874.pdf"
             onLoadSuccess={onDocumentLoadSuccess}
@@ -112,10 +112,9 @@ function MohamedSalahSlides() {
               renderTextLayer={false}
               renderAnnotationLayer={false}
               data-testid="canvas-pdf-slide"
-              className="max-w-full max-h-full object-contain"
             />
           </Document>
-        </div>
+        )}
       </div>
 
       <div className="space-y-4">