Fixing mobile styles

frontend/src/components/JobMatchAnalysis.tsx

@@ -63,17 +63,18 @@ const JobMatchScore: React.FC<{ score: number; variant?: 'small' | 'normal'; sx?
     return theme.palette.error.main;
   };
   const suffix = variant === 'small' ? '' : ' Match';
+
   return (
     <Box
+      className="JobMatchScore"
       sx={{
+        justifyContent: 'center',
+        m: 0,
+        p: 0,
         width: variant === 'small' ? '8rem' : '10rem',
-        ml: 1,
-        p: 1,
-        gap: 1,
         display: 'flex',
-        justifyContent: 'space-between',
         alignItems: 'center',
-        flexDirection: variant === 'small' ? 'row' : 'column',
+        flexDirection: 'row',
         ...sx,
       }}
     >
@@ -91,40 +92,49 @@ const JobMatchScore: React.FC<{ score: number; variant?: 'small' | 'normal'; sx?
           bgcolor: getMatchColor(score),
           color: 'white',
           fontWeight: 'bold',
+          fontSize: variant === 'small' ? '0.7rem' : '1rem',
         }}
       />
-      <Box
+      {variant !== 'small' && (
-        sx={{
-          position: 'relative',
-          display: 'inline-flex',
-        }}
-      >
-        <CircularProgress
-          variant="determinate"
-          value={score}
-          size={variant === 'small' ? 45 : 60}
-          thickness={5}
-          sx={{
-            color: getMatchColor(score),
-          }}
-        />
         <Box
           sx={{
-            top: 0,
+            position: 'relative',
-            left: 0,
+            display: 'inline-flex',
-            bottom: 0,
+            p: 0,
-            right: 0,
+            m: 0,
-            position: 'absolute',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
           }}
         >
-          <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
+          <CircularProgress
-            {`${Math.round(score)}%`}
+            variant="determinate"
-          </Typography>
+            value={score}
+            size={60}
+            thickness={5}
+            sx={{
+              color: getMatchColor(score),
+            }}
+          />
+          <Box
+            sx={{
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Typography
+              variant="caption"
+              component="div"
+              sx={{ fontWeight: 'bold', fontSize: '1rem' }}
+            >
+              {`${Math.round(score)}%`}
+            </Typography>
+          </Box>
         </Box>
-      </Box>
+      )}
     </Box>
   );
 };
@@ -480,11 +490,12 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
 
   return (
     <Scrollable
+      className="JobMatchAnalysis"
       sx={{
         display: 'flex',
         flexDirection: 'column',
         m: 0,
-        p: 0,
+        p: 1,
         width: '100%',
         minHeight: 0,
         flexGrow: 1,

frontend/src/components/ui/ResumeInfo.tsx

@@ -96,6 +96,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
 
   return (
     <Box
+      className="ResumeInfo"
       sx={{
         display: 'flex',
         borderColor: 'transparent',

frontend/src/components/ui/ResumePreview.tsx

@@ -409,7 +409,7 @@ export const ResumePreview: React.FC<ResumePreviewProps> = (props: ResumePreview
 
   if (!resume || !candidate || !job) {
     return (
-      <Box sx={{ p: 2 }}>
+      <Box className="ResumePreview" sx={{ p: 2 }}>
         <Typography variant="body1">No resume data available.</Typography>
       </Box>
     );
@@ -417,7 +417,7 @@ export const ResumePreview: React.FC<ResumePreviewProps> = (props: ResumePreview
 
   return (
     <Box
-      className="document-container"
+      className="ResumePreview document-container"
       sx={{
         ...currentStyle.contentStyle,
         position: 'relative',

frontend/src/pages/JobAnalysisPage.tsx

@@ -409,6 +409,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
 
   return (
     <Box
+      className="JobAnalysisPage"
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -432,6 +433,24 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
           maxWidth: '100%',
           width: '100%',
           flexDirection: 'column',
+          '& .MuiAvatar-root': isMobile
+            ? {
+                width: 32,
+                height: 32,
+              }
+            : {},
+          '& .MuiStepLabel-label': isMobile
+            ? {
+                fontSize: '0.9rem',
+                marginTop: '4px',
+              }
+            : {},
+          '& .MuiSvgIcon-root': isMobile
+            ? {
+                width: '0.9rem',
+                height: '0.9rem',
+              }
+            : {},
         }}
       >
         <Stepper
@@ -483,7 +502,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                 <Box sx={{ mb: 1, justifyContent: 'center' }}>
                   Candidate{!isMobile && ' Selection'}
                 </Box>
-                {selectedCandidate !== null && !isMobile && (
+                {selectedCandidate !== null && (
                   <Box
                     sx={{
                       justifySelf: 'flex-start',
@@ -508,7 +527,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                       }}
                     />
                     <Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
-                      <Box>Name</Box>
+                      {!isMobile && <Box>Name</Box>}
                       <Box sx={{ fontWeight: 'normal' }}>{selectedCandidate?.fullName}</Box>
                     </Box>
                   </Box>
@@ -548,7 +567,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                 }}
               >
                 <Box sx={{ mb: 1, justifyContent: 'center' }}>Job{!isMobile && ' Selection'}</Box>
-                {selectedJob !== null && !isMobile && (
+                {selectedJob !== null && (
                   <Box
                     sx={{
                       justifySelf: 'flex-start',
@@ -559,11 +578,11 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                     }}
                   >
                     <Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
-                      <Box>Company</Box>
+                      {!isMobile && <Box>Company</Box>}
                       <Box sx={{ fontWeight: 'normal' }}>{selectedJob.company}</Box>
                     </Box>
                     <Box sx={{ flexDirection: 'column', textAlign: 'left' }}>
-                      <Box>Title</Box>
+                      {!isMobile && <Box>Title</Box>}
                       <Box sx={{ fontWeight: 'normal' }}>{selectedJob.title}</Box>
                     </Box>
                   </Box>
@@ -600,13 +619,17 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                   '& :first-of-type': {
                     whiteSpace: 'nowrap',
                   },
+                  m: 0,
+                  p: 0,
                 }}
               >
                 <Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Job '}Analysis</Box>
                 {analysisState.analysis !== null && (
-                  <Box sx={{ justifyContent: 'center' }}>
+                  <JobMatchScore
-                    <JobMatchScore score={analysisState.analysis.score} variant="small" />
+                    sx={{ width: 'min-content', alignSelf: 'center' }}
-                  </Box>
+                    score={analysisState.analysis.score}
+                    variant="small"
+                  />
                 )}
               </Box>
             </StepLabel>
@@ -647,46 +670,6 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
             </StepLabel>
           </Step>
         </Stepper>
-        {isMobile && (
-          <Box
-            sx={{
-              mb: 1,
-              ml: 1,
-              display: 'flex',
-              justifySelf: 'flex-start',
-              flexDirection: 'row',
-              fontSize: '0.75rem',
-              gap: 1,
-              width: '100%',
-            }}
-          >
-            {selectedCandidate !== null && (
-              <Box sx={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
-                <Avatar
-                  src={
-                    selectedCandidate.profileImage
-                      ? `/api/1.0/candidates/profile/${selectedCandidate.username}`
-                      : ''
-                  }
-                  alt={`${selectedCandidate.fullName}'s profile`}
-                  sx={{
-                    alignSelf: 'flex-start',
-                    width: 32,
-                    height: 32,
-                    border: '2px solid #e0e0e0',
-                  }}
-                />
-                <Box sx={{ fontWeight: 'normal' }}>{selectedCandidate?.fullName}</Box>
-              </Box>
-            )}
-            {selectedJob !== null && (
-              <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
-                <Box sx={{ fontWeight: 'normal' }}>{selectedJob.title}</Box>
-                <Box sx={{ fontWeight: 'normal' }}>{selectedJob.company}</Box>
-              </Box>
-            )}
-          </Box>
-        )}
       </Paper>
       <Box
         ref={scrollRef}
@@ -707,7 +690,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
         {activeStep === 3 && renderResume()}
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', p: 1 }}>
         <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
           Back
         </Button>