Merge pull request #19 from nemac/mobile-fixes

Mobile fixes
nemac · Dec 13, 2024 · 3153437 · 3153437
2 parents 7bf0271 + cbed114
commit 3153437
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 26 deletions.
diff --git a/src/components/ComparisonBoard.jsx b/src/components/ComparisonBoard.jsx
@@ -34,12 +34,11 @@ export default function ComparisonBoard({
         <SetHoverRowContext.Provider value={setHoverRow}>
           <Container
             maxWidth="xl"
-            sx={{ p: 2 }}
+            sx={{ p: 0 }}
           >
             <Stack
               direction="row"
-              gap={1}
-              sx={{ bgcolor: theme.palette.primary.lightGray }}
+              sx={{ bgcolor: theme.palette.primary.lightGray, gap: { xs: 0, md: 1 }}}
             >
               {/* Community Panel */}
               <Box
@@ -76,7 +75,11 @@ export default function ComparisonBoard({
                     <Box
                       sx={{
                         position: 'absolute',
-                        top: '8px',
+                        top: {
+                          xs: '70px',
+                          sm: '40px',
+                          lg: '8px',
+                        },
                         right: '8px',
                       }}
                     >
@@ -109,7 +112,10 @@ export default function ComparisonBoard({
                   sx={{
                     pb: 2,
                     width: '100%',
-                    gap: 1,
+                    gap: {
+                      xs: '4px',
+                      md: 1,
+                    },
                     overflowX: 'auto',
                   }}
                 >

diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
@@ -98,9 +98,8 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         startIcon={<PlusIcon>+</PlusIcon>}
         sx={{ width: '100%' }}
       >
-        <Typography sx={{ display: { xs: 'none', md: 'inherit' }, fontSize: '.875rem' }}>Add another&nbsp;</Typography>
-        <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem' }}>Add&nbsp;</Typography>
-        <Typography sx={{ fontSize: '.875rem' }}>{trimmedOption.toLowerCase()}</Typography>
+        <Typography sx={{ display: { xs: 'none', md: 'inherit' }, fontSize: '.875rem', whiteSpace: 'nowrap', }}>Add another {trimmedOption.toLowerCase()}</Typography>
+        <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem', whiteSpace: 'nowrap', }}>Add another</Typography>
       </AddButton>
 
       <StyledMenu

diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
@@ -39,7 +39,7 @@ function StrTrainedBadge({ isTrained }) {
           alignItems: 'center',
         }}
       >
-        <SchoolIcon sx={{ fontSize: '1rem', mr: 0.5 }} />
+        <SchoolIcon sx={{ fontSize: {xs: 'inherit', md: '1rem'}, mr: 0.5 }} />
         <Typography
           sx={{
             display: {
@@ -107,21 +107,9 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           verticalAlign: 'middle',
           justifyContent: 'center',
           alignItems: 'center',
-          bgcolor: {
-            xs: 'primary.main',
-            md: 'primary.lightGray',
-          },
+          bgcolor: 'primary.lightGray',
         }}
       >
-        <PersonIcon
-          sx={{
-            display: {
-              xs: 'inherit',
-              md: 'none',
-            },
-            color: 'primary.lightBlue',
-          }}
-        />
       </StyledBox>
 
       {/* Title and info icon container */}
@@ -192,21 +180,21 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           href={`/practitioner/${practitioner.airtableRecId}`}
           target="_blank"
           rel="noopener noreferrer"
-          startIcon={<PersonIcon />}
+          startIcon={<PersonIcon sx={{ mr: '-12px' }}/>}
           variant="contained"
           sx={{
             bgcolor: 'primary.midBlue',
             color: 'primary.white',
             textTransform: 'none',
             borderRadius: 2,
             width: '100%',
+            gap: '12px',
             '&:hover': {
               bgcolor: 'primary.main',
             },
           }}
         >
           <Typography sx={{ display: { xs: 'none', md: 'inherit' }, fontSize: '.875rem' }}>View Full Profile</Typography>
-          <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem' }}>View Profile</Typography>
         </Button>
       </Box>
     </HeaderBox>

diff --git a/src/components/Section.jsx b/src/components/Section.jsx
@@ -32,7 +32,7 @@ export default function Section({
       key={id}
       sx={{ mb: 2 }}
     >
-      <Box sx={{ minHeight: '40px', mt: '5px', mb: '5px' }}>
+      <Box sx={{ minHeight: { xs: '60px', md: '40px' }, mt: '5px', mb: '5px' }}>
         <Typography variant="body1">{header}</Typography>
       </Box>
 

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -867,7 +867,7 @@ export default function LandingPage() {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                mb: 3,
+                mb: 4,
                 gap: 1,
                 flexDirection: {
                   xs: 'column',