Fixes for mobile

frontend/src/components/ui/CandidatePicker.tsx

@@ -7,6 +7,7 @@ import { Candidate } from 'types/types';
 import { useAuth } from 'hooks/AuthContext';
 import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
 import { Paper } from '@mui/material';
+import { Scrollable } from 'components/Scrollable';
 
 interface CandidatePickerProps extends BackstoryElementProps {
   onSelect?: (candidate: Candidate) => void;
@@ -52,7 +53,17 @@ const CandidatePicker = (props: CandidatePickerProps): JSX.Element => {
   }, [candidates, setSnack, apiClient]);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', ...sx }}>
+    <Scrollable
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        m: 0,
+        p: 0,
+        width: '100%',
+        minHeight: 0,
+        position: 'relative',
+      }}
+    >
       <Box
         sx={{
           display: 'flex',
@@ -87,7 +98,7 @@ const CandidatePicker = (props: CandidatePickerProps): JSX.Element => {
           </Paper>
         ))}
       </Box>
-    </Box>
+    </Scrollable>
   );
 };
 

frontend/src/components/ui/JobsView.tsx

@@ -492,15 +492,22 @@ const JobsView: React.FC<JobsViewProps> = ({
                 </Box>
               </TableCell>
               <TableCell>Description</TableCell>
-              <TableCell>Owner</TableCell>
+              {!isMobile && (
-              <TableCell sx={{ cursor: 'pointer' }} onClick={(): void => handleSort('updatedAt')}>
+                <>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <TableCell>Owner</TableCell>
-                  <ScheduleIcon fontSize="small" />
+                  <TableCell
-                  Updated {getSortIcon('updatedAt')}
+                    sx={{ cursor: 'pointer' }}
-                </Box>
+                    onClick={(): void => handleSort('updatedAt')}
-              </TableCell>
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      <ScheduleIcon fontSize="small" />
+                      Updated {getSortIcon('updatedAt')}
+                    </Box>
+                  </TableCell>
+                </>
+              )}
               {/* <TableCell>Status</TableCell> */}
-              {showActions && <TableCell align="center">Actions</TableCell>}
+              {!isMobile && showActions && <TableCell align="center">Actions</TableCell>}
             </TableRow>
           </TableHead>
           <TableBody>
@@ -566,12 +573,16 @@ const JobsView: React.FC<JobsViewProps> = ({
                         {truncateDescription(job.summary || job.description || '', 100)}
                       </Typography>
                     </TableCell>
-                    <TableCell>
+                    {!isMobile && (
-                      <Typography variant="body2">{getOwnerName(job.owner)}</Typography>
+                      <>
-                    </TableCell>
+                        <TableCell>
-                    <TableCell>
+                          <Typography variant="body2">{getOwnerName(job.owner)}</Typography>
-                      <Typography variant="body2">{formatDate(job.updatedAt)}</Typography>
+                        </TableCell>
-                    </TableCell>
+                        <TableCell>
+                          <Typography variant="body2">{formatDate(job.updatedAt)}</Typography>
+                        </TableCell>
+                      </>
+                    )}
                     {/* <TableCell>
                       <Chip
                         label={job.details?.isActive ? 'Active' : 'Inactive'}
@@ -579,7 +590,7 @@ const JobsView: React.FC<JobsViewProps> = ({
                         size="small"
                       />
                     </TableCell> */}
-                    {showActions && (
+                    {!isMobile && showActions && (
                       <TableCell align="center" onClick={(e): void => e.stopPropagation()}>
                         <Box sx={{ display: 'flex', gap: 0.5 }}>
                           {onJobView && (

frontend/src/pages/JobAnalysisPage.tsx

@@ -91,7 +91,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
   });
   const [canAdvance, setCanAdvance] = useState<boolean>(false);
   const scrollRef = useRef<HTMLDivElement>(null);
-  // const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [activeStep, setActiveStep] = useState<number>(user === null ? 0 : 1);
   const maxStep = 4;
 
@@ -348,12 +348,14 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
         flexDirection: 'column',
         height: '100%' /* Restrict to main-container's height */,
         width: '100%',
+        maxWidth: '100%',
         position: 'relative',
       }}
     >
       <Paper
         elevation={4}
         sx={{
+          fontSize: isMobile ? '0.875rem' : '1rem',
           display: 'flex',
           position: 'relative',
           m: 0,
@@ -361,6 +363,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
           mb: 1,
           p: 0,
           gap: 1,
+          maxWidth: '100%',
+          width: '100%',
           flexDirection: 'column',
         }}
       >
@@ -376,6 +380,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
               flexDirection: 'column',
               width: '100%',
             },
+            maxWidth: '100%',
+            overflow: 'hidden',
           }}
         >
           <Step key={0}>
@@ -408,8 +414,10 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                   },
                 }}
               >
-                <Box sx={{ mb: 1, justifyContent: 'center' }}>Candidate Selection</Box>
+                <Box sx={{ mb: 1, justifyContent: 'center' }}>
-                {selectedCandidate !== null && (
+                  Candidate{!isMobile && 'Selection'}
+                </Box>
+                {selectedCandidate !== null && !isMobile && (
                   <Box
                     sx={{
                       justifySelf: 'flex-start',
@@ -473,8 +481,8 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                   },
                 }}
               >
-                <Box sx={{ mb: 1, justifyContent: 'center' }}>Job Selection</Box>
+                <Box sx={{ mb: 1, justifyContent: 'center' }}>Job{!isMobile && 'Selection'}</Box>
-                {selectedJob !== null && (
+                {selectedJob !== null && !isMobile && (
                   <Box
                     sx={{
                       justifySelf: 'flex-start',
@@ -528,7 +536,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                   },
                 }}
               >
-                <Box sx={{ mb: 1, justifyContent: 'center' }}>Job Analysis</Box>
+                <Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Job '}Analysis</Box>
                 {analysisState.analysis !== null && (
                   <Box sx={{ justifyContent: 'center' }}>
                     <JobMatchScore score={analysisState.analysis.score} variant="small" />
@@ -568,11 +576,51 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = () => {
                   },
                 }}
               >
-                <Box sx={{ mb: 1, justifyContent: 'center' }}>Generate Resume</Box>
+                <Box sx={{ mb: 1, justifyContent: 'center' }}>{!isMobile && 'Generate '}Resume</Box>
               </Box>
             </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}