Updated resume layout

frontend/src/components/DiffViewer.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { createPatch } from 'diff';
 import { Box, SxProps } from '@mui/material';
-import * as Diff2Html from 'diff2html';
 import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
 import 'diff2html/bundles/css/diff2html.min.css';
 import './DiffViewer.css';

frontend/src/components/ui/ResumeInfo.css

@@ -141,7 +141,7 @@
 .BackstoryResumeHeader {
   gap: 1rem;
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   /* border: 3px solid orange; */
 }
 

frontend/src/components/ui/ResumeInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
   Typography,
@@ -410,6 +410,7 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
   return (
     <Box className="BackstoryResumeHeader" sx={style.headerStyle}>
       <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+        <Box sx={{ display: 'flex' }}>
           <Typography
             variant="h4"
             sx={{
@@ -421,8 +422,17 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
           >
             {candidate.fullName}
           </Typography>
-
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 1,
+          }}
+        >
           {candidate.description && (
+            <Box sx={{ display: 'flex' }}>
               <Typography
                 variant="h6"
                 sx={{
@@ -435,8 +445,8 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
               >
                 {candidate.description}
               </Typography>
-        )}
             </Box>
+          )}
 
           <Box
             sx={{
@@ -526,6 +536,8 @@ const StyledHeader: React.FC<BackstoryStyledResumeProps> = ({ candidate, style }
           </Grid>
         )} */}
         </Box>
+      </Box>
+    </Box>
   );
 };
 
@@ -563,7 +575,9 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
     }
   }, [resume, activeResume]);
 
-  const currentStyle = resumeStyles[selectedStyle];
+  const currentStyle = useMemo(() => {
+    return resumeStyles[selectedStyle];
+  }, [selectedStyle]);
 
   // Rest of the component remains the same...
   const deleteResume = async (id: string | undefined): Promise<void> => {