Fix pre tag wrap

frontend/src/App.css

@@ -4,6 +4,15 @@ div {
   word-break: break-word;
 }
 
+pre {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  white-space: pre-wrap;
+  box-sizing: border-box;
+  border: 3px solid #E0E0E0;
+}
+
 button {
   overflow-wrap: initial;
   word-break: initial;

frontend/src/DocumentViewer.tsx

@@ -57,7 +57,7 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
   // State for controlling which document is active on mobile
   const [activeTab, setActiveTab] = useState<number>(0);
   // State for controlling split ratio on desktop
-  const [splitRatio, setSplitRatio] = useState<number>(100);
+  const [splitRatio, setSplitRatio] = useState<number>(0);
   
   /**
    * Reset processing state when resume is generated
@@ -254,6 +254,12 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
     <Box key="FactView" sx={{ display: "flex", flexDirection: "column", overflow: "auto", flexGrow: 1, flexBasis: 0, p: 0 }}>
       <Document sx={{ display: "flex", flexGrow: 1 }} title="">
         {facts !== undefined && <Message message={facts} />}
+        {/* <pre>
+
+          With over 20 years of experience as a software architect, team lead, and developer, James Ketrenos brings a unique blend of technical expertise and leadership to the table. Focused on advancing energy-efficient AI solutions, he excels in designing, building, and deploying scalable systems that enable rapid product development. His extensive background in Linux software architecture, DevOps, and open-source technologies makes him an ideal candidate for leading roles at technology-driven companies.
+
+          ---
+        </pre> */}
       </Document>
       {processing === "facts" && (
         <Box sx={{
@@ -429,7 +435,7 @@ const ResumeActionCard: React.FC<ResumeActionCardProps> = ({ resume, processing,
         size="large"
         edge="start"
         color="inherit"
-        disabled={processing === "resume"}
+        disabled={processing !== undefined}
         onClick={() => { triggerFactCheck(undefined); }}
       >
         <Tooltip title="Reset Resume">
@@ -441,7 +447,7 @@ const ResumeActionCard: React.FC<ResumeActionCardProps> = ({ resume, processing,
           <Button
             sx={{ m: 1, gap: 1, flexGrow: 1 }}
             variant="contained"
-            disabled={processing === "facts"}
+            disabled={processing !== undefined}
             onClick={() => { resume && triggerFactCheck(resume.content); }}
           >
             Fact Check<SendIcon />