Improve report slide viewer by integrating PowerPoint API seamlessly

Integrate PowerPoint API into the Report page's slide viewer, removing unnecessary black margins and ensuring a clean, full-width display by utilizing an iframe with adjusted styling and dimensions.

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/16cZmxV

.replit

@@ -26,6 +26,10 @@ externalPort = 3001
 localPort = 38387
 externalPort = 3003
 
+[[ports]]
+localPort = 39255
+externalPort = 4200
+
 [[ports]]
 localPort = 43349
 externalPort = 3000

client/src/pages/Report.tsx

@@ -66,18 +66,22 @@ export default function Report() {
             </Card>
           </TabsContent>
 
-          <TabsContent value="slides">
-            <Card className="bg-white shadow-2xl">
-              <CardContent className="p-0">
+          <TabsContent value="slides" className="w-full">
+            <div className="w-full bg-white rounded-lg overflow-hidden shadow-lg">
+              <div className="relative w-full" style={{ paddingTop: '56.25%' }}>
                 <iframe
                   src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(getFullPptUrl())}`}
-                  className="w-full border-none"
-                  style={{ minHeight: '600px', height: '80vh' }}
+                  className="absolute top-0 left-0 w-full h-full border-none"
                   title="Presentation Slides"
                   data-testid="iframe-slides"
+                  allowFullScreen
+                  style={{ 
+                    backgroundColor: 'white',
+                    display: 'block'
+                  }}
                 />
-              </CardContent>
-            </Card>
+              </div>
+            </div>
           </TabsContent>
         </Tabs>
       </main>