aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust report display to minimize margins and improve iframe appearance

Browse Source 
Inject custom CSS into the report iframe to remove default margins and padding, and reduce padding in report content containers.

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
This commit is contained in:
kimjaehyeon0101
2025-09-30 06:18:04 +00:00
parent e5a2778752
commit bc18c2d658
3 changed files with 37 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/pages/Report.tsx
View File

@ -27,6 +27,39 @@ export default function Report() {
return `${baseUrl}${content.pptPath}`;
};
// Remove margins and padding from iframe content
const handleReportLoad = (e: React.SyntheticEvent<HTMLIFrameElement>) => {
try {
const iframe = e.currentTarget;
const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
if (iframeDoc) {
const style = iframeDoc.createElement('style');
style.textContent = `
html, body {
margin: 0 !important;
padding: 0 !important;
}
body > * {
margin: 0 !important;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
margin-top: 0 !important;
}
.report, .container, .page, .content {
margin: 0 !important;
padding: 8px !important;
}
@page {
margin: 0 !important;
}
`;
iframeDoc.head.appendChild(style);
}
} catch (e) {
console.error('Could not inject styles into iframe:', e);
}
};
return (
<div className="flex flex-col min-h-screen bg-gray-50">
{/* Header */}
@ -39,9 +72,9 @@ export default function Report() {
</header>
{/* Main Content */}
<main className="flex-1 max-w-7xl mx-auto px-4 py-8 pb-32 w-full">
<main className="flex-1 max-w-7xl mx-auto px-2 py-2 pb-32 w-full">
<Tabs defaultValue="report" className="w-full">
<TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-8">
<TabsList className="grid w-full max-w-md mx-auto grid-cols-2 mb-4">
<TabsTrigger value="report" data-testid="tab-report">
<FileText className="h-4 w-4 mr-2" />
Report
@ -58,9 +91,10 @@ export default function Report() {
<iframe
src={content.htmlPath}
className="w-full border-none"
style={{ minHeight: '100vh', height: 'auto' }}
style={{ display: 'block', minHeight: '100vh', height: 'auto' }}
title="Comprehensive Report"
data-testid="iframe-report"
onLoad={handleReportLoad}
/>
</CardContent>
</Card>