From e61e88561e4619dc78e7122ea886195af62e3c8c Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Tue, 10 Jun 2025 18:03:46 -0700
Subject: [PATCH] Fixed some Mobile UI issues

---
 frontend/src/components/JobMatchAnalysis.tsx |  6 +++---
 frontend/src/components/ui/CandidateInfo.tsx | 10 +++++-----
 frontend/src/components/ui/JobInfo.tsx       |  6 +++---
 frontend/src/pages/JobAnalysisPage.tsx       |  4 ++--
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/JobMatchAnalysis.tsx b/frontend/src/components/JobMatchAnalysis.tsx
index 60430d0..469a617 100644
--- a/frontend/src/components/JobMatchAnalysis.tsx
+++ b/frontend/src/components/JobMatchAnalysis.tsx
@@ -243,13 +243,13 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
   };
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column" }}>
+    <Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
       {variant !== "small" &&
         <JobInfo job={job} variant="normal" />
       }
 
-      <Box sx={{ display: 'flex', flexDirection: "row", alignItems: 'center', mb: 2, gap: 1, justifyContent: "space-between" }}>
-        <Box sx={{ display: "flex", flexDirection: "row", flexGrow: 1 }}>
+      <Box sx={{ display: 'flex', flexDirection: "row", alignItems: 'center', mb: isMobile ? 1 : 2, gap: 1, justifyContent: "space-between" }}>
+        <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", flexGrow: 1, gap: 1 }}>
           {overallScore !== 0 && <>
               <Typography variant="h5" component="h2" sx={{ mr: 2 }}>
                 Overall Match:
diff --git a/frontend/src/components/ui/CandidateInfo.tsx b/frontend/src/components/ui/CandidateInfo.tsx
index ef35099..11ecb41 100644
--- a/frontend/src/components/ui/CandidateInfo.tsx
+++ b/frontend/src/components/ui/CandidateInfo.tsx
@@ -56,7 +56,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
         borderStyle: 'solid',
         transition: 'all 0.3s ease',
         flexGrow: 1,
-        p: 3,
+        p: isMobile ? 1 : 3,
         height: '100%',
         flexDirection: 'column',
         alignItems: 'stretch',
@@ -74,8 +74,8 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
           alt={`${candidate.fullName}'s profile`}
             sx={{
               alignSelf: "flex-start",
-              width: 80,
-              height: 80,
+              width: isMobile ? 40 : 80,
+              height: isMobile ? 40 : 80,
               border: '2px solid #e0e0e0',
             }}
         />
@@ -128,9 +128,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
             </Box>
           </Box>
 
-          <Typography variant="body1" color="text.secondary">
+          {(!isMobile || variant !== "small") && <Typography variant="body1" color="text.secondary">
             {candidate.description}
-          </Typography>
+          </Typography>}
 
           {variant !== "small" && <>
             <Divider sx={{ my: 2 }} />
diff --git a/frontend/src/components/ui/JobInfo.tsx b/frontend/src/components/ui/JobInfo.tsx
index 112eab1..8685c89 100644
--- a/frontend/src/components/ui/JobInfo.tsx
+++ b/frontend/src/components/ui/JobInfo.tsx
@@ -203,13 +203,13 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
       }}
       {...rest}
     >
-      <Box sx={{ display: "flex", flexGrow: 1, p: 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}>
+      <Box sx={{ display: "flex", flexGrow: 1, p: isMobile ? 1 : 3, height: '100%', flexDirection: 'column', alignItems: 'stretch', position: "relative" }}>
         <Box sx={{
           display: "flex", flexDirection: (isMobile || variant !== "small") ? "column" : "row",
           "& > div > div > :first-of-type": { fontWeight: "bold" },
           "& > div > div > :last-of-type": { mb: 0.75, mr: 1 }
         }}>
-          <Box sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}>
+          <Box sx={{ display: "flex", flexDirection: isMobile ? "row" : "column", flexGrow: 1 }}>
             {
               activeJob.title && <Box sx={{ fontSize: "0.8rem" }}>
                 <Box>Title</Box>
@@ -222,7 +222,7 @@ const JobInfo: React.FC<JobInfoProps> = (props: JobInfoProps) => {
             </Box>}
           </Box>
           <Box sx={{ display: "flex", flexDirection: "column", width: "75%" }}>
-            {activeJob.summary && <Box sx={{ fontSize: "0.8rem" }}>
+            {!isMobile && activeJob.summary && <Box sx={{ fontSize: "0.8rem" }}>
               <Box>Summary</Box>
               <Box>{activeJob.summary}</Box>
             </Box>}
diff --git a/frontend/src/pages/JobAnalysisPage.tsx b/frontend/src/pages/JobAnalysisPage.tsx
index f0a9987..63c2430 100644
--- a/frontend/src/pages/JobAnalysisPage.tsx
+++ b/frontend/src/pages/JobAnalysisPage.tsx
@@ -325,7 +325,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
         <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
           {analysisState && analysisState.job &&
             <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
-              <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Job</Box>
+              {!isMobile && <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Job</Box>}
               <JobInfo variant="small" job={analysisState.job} />
             </Box>
           }
@@ -333,7 +333,7 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
           {!isMobile && <Box sx={{ display: "flex", borderLeft: "1px solid lightgrey" }} />}
           {analysisState && analysisState.candidate &&
             <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
-              <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Candidate</Box>
+              {!isMobile && <Box sx={{ ml: 3, fontWeight: "bold" }}>Selected Candidate</Box>}
               <CandidateInfo variant="small" candidate={analysisState.candidate} sx={{}} />
             </Box>
           }