From 7abc7476471122de65e47505c5482f888f688b53 Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Fri, 13 Dec 2024 15:04:53 -0600
Subject: [PATCH 1/3] Show three practitioners on phone

---
 src/components/ComparisonBoard.jsx  | 10 ++++++----
 src/components/DropDownSelector.jsx |  5 ++---
 src/components/PractitionerPane.jsx | 20 ++++----------------
 src/components/Section.jsx          |  2 +-
 4 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/ComparisonBoard.jsx b/src/components/ComparisonBoard.jsx
index 6d67a03..f63784e 100644
--- 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
@@ -109,7 +108,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
index fe9b2da..94430ed 100644
--- 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', textTransform: 'capitalize', whiteSpace: 'nowrap', }}>{trimmedOption}</Typography> */}
       </AddButton>
 
       <StyledMenu
diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
index 0eac6e5..6efcb01 100644
--- 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,7 +180,7 @@ 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',
@@ -200,13 +188,13 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
             textTransform: 'none',
             borderRadius: 2,
             width: '100%',
+            gap: 2,
             '&: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
index 4b6a31a..88c60c0 100644
--- 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>
 

From 433f9fc3f159d7afac59bf2b3b9790f3a89efd16 Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Fri, 13 Dec 2024 15:19:50 -0600
Subject: [PATCH 2/3] view more matches placement and small adjustments

---
 src/components/ComparisonBoard.jsx  | 6 +++++-
 src/components/PractitionerPane.jsx | 2 +-
 src/pages/LandingPage.jsx           | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ComparisonBoard.jsx b/src/components/ComparisonBoard.jsx
index f63784e..d328013 100644
--- a/src/components/ComparisonBoard.jsx
+++ b/src/components/ComparisonBoard.jsx
@@ -75,7 +75,11 @@ export default function ComparisonBoard({
                     <Box
                       sx={{
                         position: 'absolute',
-                        top: '8px',
+                        top: {
+                          xs: '70px',
+                          sm: '40px',
+                          lg: '8px',
+                        },
                         right: '8px',
                       }}
                     >
diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
index 6efcb01..ad622c2 100644
--- a/src/components/PractitionerPane.jsx
+++ b/src/components/PractitionerPane.jsx
@@ -188,7 +188,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
             textTransform: 'none',
             borderRadius: 2,
             width: '100%',
-            gap: 2,
+            gap: '12px',
             '&:hover': {
               bgcolor: 'primary.main',
             },
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 04d6517..5b61712 100644
--- 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',

From cbed114661231104d44c818aff421dfcc47f9aab Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Fri, 13 Dec 2024 15:33:08 -0600
Subject: [PATCH 3/3] Add button mobile styling

---
 src/components/DropDownSelector.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
index 94430ed..886058a 100644
--- a/src/components/DropDownSelector.jsx
+++ b/src/components/DropDownSelector.jsx
@@ -99,7 +99,7 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         sx={{ width: '100%' }}
       >
         <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', textTransform: 'capitalize', whiteSpace: 'nowrap', }}>{trimmedOption}</Typography> */}
+        <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem', whiteSpace: 'nowrap', }}>Add another</Typography>
       </AddButton>
 
       <StyledMenu