From c643b0d8f863c868492beb5ae0c3e86c6198c343 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 19 Jun 2025 10:32:38 -0700
Subject: [PATCH] Added some print margins

---
 frontend/src/components/ui/ResumeInfo.css | 136 ++++++++++++++++++++++
 frontend/src/components/ui/ResumeInfo.tsx |  37 +++---
 2 files changed, 155 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/ui/ResumeInfo.css

diff --git a/frontend/src/components/ui/ResumeInfo.css b/frontend/src/components/ui/ResumeInfo.css
new file mode 100644
index 0000000..a1d4efa
--- /dev/null
+++ b/frontend/src/components/ui/ResumeInfo.css
@@ -0,0 +1,136 @@
+/* A4 Portrait simulation for MuiMarkdown */
+.a4-document {
+  /* A4 dimensions: 210mm x 297mm */
+  width: 210mm;
+  min-height: 297mm;
+  
+  /* Alternative pixel-based approach (96 DPI) */
+  /* width: 794px; */
+  /* height: 1123px; */
+  
+  /* Document styling */
+  background: white;
+  padding: 8mm; /* 1/4" margins all around */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
+  
+  /* Typography for document feel */
+  font-family: 'Times New Roman', serif;
+  font-size: 12pt;
+  line-height: 1.6;
+  color: #333;
+
+  /* Page break lines - repeating dotted lines every A4 height */
+  background-image: 
+    repeating-linear-gradient(
+      transparent,
+      transparent calc(8mm - 1px),
+      #00f calc(8mm),
+      transparent calc(8mm + 1px),
+      transparent calc(288mm - 1px), /* 297mm - 8mm top/bottom margins */
+      #00f calc(288mm),
+      transparent calc(288mm + 1px),
+      transparent calc(296mm - 1px),
+      #000 calc(296mm),
+      transparent calc(296mm + 1px)
+    );
+  background-size: 100% 297mm;
+  background-repeat: repeat-y;
+  
+  /* Ensure proper page breaks for printing */
+  page-break-after: always;
+  
+  /* Prevent content overflow */
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Container to center the document */
+.document-container {
+  display: flex;
+  justify-content: center;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20px 0;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 900px) {
+  .a4-document {
+    width: 95vw;
+    height: auto;
+    min-height: 134vw; /* Maintains A4 aspect ratio (297/210 ≈ 1.414) */
+    margin: 10px auto;
+    padding: 6vw;
+  }
+}
+
+/* Print styles */
+@media print {
+  .document-container {
+    background: none;
+    padding: 0mm !important;
+    margin: 0mm !important;
+  }
+  
+  .a4-document {
+    width: 210mm;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border: none;
+    page-break-after: always;
+  }
+}
+
+/* Additional MuiMarkdown specific adjustments */
+.a4-document h1,
+.a4-document h2,
+.a4-document h3,
+.a4-document h4,
+.a4-document h5,
+.a4-document h6 {
+  font-size: 1em;
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+/* Put after above so they take precedence */
+.a4-document h1,
+.a4-document h2 {
+  font-size: 1.1em;
+}
+
+
+.a4-document p {
+  margin-bottom: 1em;
+  text-align: justify;
+}
+
+.a4-document ul,
+.a4-document ol {
+  margin-bottom: 1em;
+  padding-left: 2em;
+}
+
+.a4-document blockquote {
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 3px solid #ccc;
+  font-style: italic;
+}
+
+.a4-document code {
+  background-color: #f5f5f5;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+}
+
+.a4-document pre {
+  background-color: #f5f5f5;
+  padding: 1em;
+  border-radius: 5px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/ResumeInfo.tsx b/frontend/src/components/ui/ResumeInfo.tsx
index faa5cf6..e5a3245 100644
--- a/frontend/src/components/ui/ResumeInfo.tsx
+++ b/frontend/src/components/ui/ResumeInfo.tsx
@@ -51,6 +51,7 @@ import { StyledMarkdown } from 'components/StyledMarkdown';
 import { Resume } from 'types/types';
 import { BackstoryTextField } from 'components/BackstoryTextField';
 import { JobInfo } from './JobInfo';
+import './ResumeInfo.css';
 
 interface ResumeInfoProps {
   resume: Resume;
@@ -81,7 +82,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
   const printContentRef = useRef<HTMLDivElement>(null);
   const reactToPrintFn = useReactToPrint({
     contentRef: printContentRef,
-    pageStyle: '@page { margin: 10px; }',
+    pageStyle: '@page { margin: 8mm !important; }',
   });
 
   useEffect(() => {
@@ -407,7 +408,6 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
         <StyledMarkdown
           content={activeResume.resume}
           sx={{
-            p: 2,
             position: 'relative',
             maxHeight: '100%',
             width: '100%',
@@ -492,22 +492,23 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
               />
             )}
             {tabValue === 'preview' && (
-              <>
-                <StyledMarkdown
-                  sx={{
-                    p: 2,
-                    position: 'relative',
-                    maxHeight: '100%',
-                    width: '100%',
-                    display: 'flex',
-                    flexGrow: 1,
-                    flex: 1 /* Take remaining space in some-container */,
-                    overflowY: 'auto' /* Scroll if content overflows */,
-                  }}
-                  content={editContent}
-                />
-                <Box sx={{ pb: 2 }}></Box>
-              </>
+              <Box className="document-container">
+                <Box className="a4-document">
+                  <StyledMarkdown
+                    sx={{
+                      position: 'relative',
+                      maxHeight: '100%',
+                      width: '100%',
+                      display: 'flex',
+                      flexGrow: 1,
+                      flex: 1 /* Take remaining space in some-container */,
+                      // overflowY: 'auto' /* Scroll if content overflows */,
+                    }}
+                    content={editContent}
+                  />
+                </Box>
+                <Box sx={{ p: 2 }}>&nbsp;</Box>
+              </Box>
             )}
             {tabValue === 'job' && activeResume.job && (
               <JobInfo