From 43b09fa5325afac11ecbe0e6ce78b1710c591b5d Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Tue, 3 Dec 2024 15:38:38 -0600
Subject: [PATCH 1/3] Column size decreases with screen size

---
 src/components/DropDownSelector.jsx |  1 +
 src/components/PractitionerPane.jsx |  3 ++-
 src/pages/SelfServicePage.jsx       | 20 ++++++++++----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
index cbbf2d2..9e5c656 100644
--- a/src/components/DropDownSelector.jsx
+++ b/src/components/DropDownSelector.jsx
@@ -87,6 +87,7 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         startIcon={<PlusIcon>+</PlusIcon>}
+        sx={{ width: "100%" }}
       >
         Add another {option}
       </AddButton>
diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
index 4410e55..d6ca6e7 100644
--- a/src/components/PractitionerPane.jsx
+++ b/src/components/PractitionerPane.jsx
@@ -116,6 +116,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
+          textWrap: 'auto',
         }}
       >
         {practitioner.org}
@@ -154,7 +155,7 @@ export default function PractitionerPane({ community, practitioner, poppedPracti
   return (
     <Box
       style={{
-        flex: '1 1 33%',
+        // flex: '1 1 33%',
         backgroundColor: theme.palette.primary.lightGray,
       }}
     >
diff --git a/src/pages/SelfServicePage.jsx b/src/pages/SelfServicePage.jsx
index 49af2bd..18e393b 100644
--- a/src/pages/SelfServicePage.jsx
+++ b/src/pages/SelfServicePage.jsx
@@ -114,7 +114,9 @@ export default function SelfServicePage() {
                 gap={1}
                 sx={{ bgcolor: theme.palette.primary.lightGray }}
               >
-                <Box mt={3}>
+
+                {/* My Community */}
+                <Box mt={3} sx={{ flex: "1 1 250px;" }}>
                   <CommunityPane
                     community={community}
                     isSelectable={true}
@@ -122,8 +124,9 @@ export default function SelfServicePage() {
                     onSelectionChange={handleSelectionChange}
                   />
                 </Box>
+
                 {/* Practitioners */}
-                <Stack sx={{ width: '60%', pl: 0 }}>
+                <Stack sx={{ width: '60%', pl: 0, flex: "3 2 auto" }}>
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, mt: 1 }}>
                     <Box sx={{ width: '100%', textAlign: 'center' }}>
                       {' '}
@@ -140,6 +143,7 @@ export default function SelfServicePage() {
                         Matched Practitioners
                       </Typography>
                     </Box>
+                    
                     {hasMorePractitioners && (
                       <Box
                         sx={{
@@ -177,18 +181,14 @@ export default function SelfServicePage() {
                     sx={{
                       pb: 2,
                       width: '100%',
+                      // bgcolor: "purple" for testing
                     }}
                   >
+                    {/* each individual box */}
                     {visiblePractitioners.map((pract, index) => (
                       <Box
                         key={index}
-                        sx={{
-                          width: `${100 / 3}%`,
-                          minWidth: '250px',
-                          flexGrow: 1,
-                          flexShrink: 0,
-                          flexBasis: 0,
-                        }}
+                        sx={{ flex: "1 1 0" }}
                       >
                         <PractitionerPane
                           community={community}
@@ -199,7 +199,7 @@ export default function SelfServicePage() {
                       </Box>
                     ))}
                   </Stack>
-                </Stack>
+                 </Stack>
               </Stack>
             </Container>
           </SetHoverRowContext.Provider>

From 8f7481a45e07e3618036df14d6b8847c48a63240 Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Wed, 4 Dec 2024 11:31:40 -0600
Subject: [PATCH 2/3] Icon sizing

---
 src/components/Cell.jsx                 |  1 -
 src/components/HeaderBox.jsx            |  1 -
 src/components/PractitionerPane.jsx     | 22 +++++++++++++++++++---
 src/components/svg/PractMatchSymbol.jsx |  8 ++------
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index 15402be..4bba240 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -58,7 +58,6 @@ export default function Cell({ label, type, key, isSelectable, onRemove }) {
         borderBottomRightRadius: 0,
         borderTopLeftRadius: type === 'community' ? theme.spacing(2) : 0,
         borderBottomLeftRadius: type === 'community' ? theme.spacing(2) : 0,
-        padding: 3,
         bgcolor: key === hoverRow ? 'primary.cellHoverBg' : 'primary.tan',
         height: { xs: 120, md: 50 },
         justifyContent: 'center',
diff --git a/src/components/HeaderBox.jsx b/src/components/HeaderBox.jsx
index 2959cb6..89128fd 100644
--- a/src/components/HeaderBox.jsx
+++ b/src/components/HeaderBox.jsx
@@ -6,7 +6,6 @@ import { styled } from "@mui/material/styles";
 const HeaderBox = styled(Box)(({ theme }) => ({
   height: '200px',
   alignContent: 'center',
-  textAlign: 'center',
 }));
 
 export default HeaderBox;
diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
index d6ca6e7..8504be2 100644
--- a/src/components/PractitionerPane.jsx
+++ b/src/components/PractitionerPane.jsx
@@ -14,9 +14,9 @@ const matchVals = (commCats, practCats) => {
   return commCats.map((commCat) => practCats.includes(commCat));
 };
 
+// Person icon (mobile), school icon (mobile)
 const StyledBox = styled(Box)({
   height: 45,
-  maxWidth: '80%',
 });
 
 function StrTrainedBadge({ isTrained }) {
@@ -35,7 +35,10 @@ function StrTrainedBadge({ isTrained }) {
             xs: 'primary.lightBlue',
             md: 'primary.main',
           },
-          color: 'primary.lightGray',
+          color: {
+            xs: 'primary.main',
+            md: 'primary.lightGray',
+          },
           flexGrow: 'space-around',
           verticalAlign: 'middle',
           justifyContent: 'center',
@@ -80,7 +83,18 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
   };
 
   return (
-    <HeaderBox
+    <HeaderBox 
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '80%',
+        margin: '0 auto',
+        display: {
+          md: 'flex',
+          xs: 'block'
+        },
+      }}
       ref={headerRef}
       onMouseEnter={onMouseEnter}
     >
@@ -102,6 +116,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
               xs: 'inherit',
               md: 'none',
             },
+            color: "primary.lightBlue",
           }}
         />
       </StyledBox>
@@ -117,6 +132,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           textWrap: 'auto',
+          textAlign: 'center',
         }}
       >
         {practitioner.org}
diff --git a/src/components/svg/PractMatchSymbol.jsx b/src/components/svg/PractMatchSymbol.jsx
index 292192f..ff1ced5 100644
--- a/src/components/svg/PractMatchSymbol.jsx
+++ b/src/components/svg/PractMatchSymbol.jsx
@@ -15,13 +15,9 @@ export default function PractMatchSymbol({ label }) {
       <Box
         sx={{
           width: {
-            xs: 20,
+            xs: "clamp(20px, 75%, 40px)",
             md: 25
-          },
-          height: {
-            xs: 20,
-            md: 25
-          }
+          }    
         }} 
       >
         {

From 3c23357ed1fdef484a85f6d928263528309b2f8c Mon Sep 17 00:00:00 2001
From: Dani Levy <dlevy@unca.edu>
Date: Thu, 5 Dec 2024 08:16:45 -0600
Subject: [PATCH 3/3] More spacing fixes

---
 src/components/Cell.jsx             | 1 +
 src/components/DropDownSelector.jsx | 6 +++++-
 src/pages/SelfServicePage.jsx       | 8 ++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index 4bba240..236fa95 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -60,6 +60,7 @@ export default function Cell({ label, type, key, isSelectable, onRemove }) {
         borderBottomLeftRadius: type === 'community' ? theme.spacing(2) : 0,
         bgcolor: key === hoverRow ? 'primary.cellHoverBg' : 'primary.tan',
         height: { xs: 120, md: 50 },
+        minWidth: {xs: 50, md: 150 },
         justifyContent: 'center',
       }}
     >
diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
index 9e5c656..439ca00 100644
--- a/src/components/DropDownSelector.jsx
+++ b/src/components/DropDownSelector.jsx
@@ -3,6 +3,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
 
 // Styled components
 const AddButton = styled(Button)(({ theme }) => ({
@@ -89,7 +90,10 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         startIcon={<PlusIcon>+</PlusIcon>}
         sx={{ width: "100%" }}
       >
-        Add another {option}
+        <Typography sx={{ display: {xs: 'none', md: 'inherit'}, fontSize: '.875rem' }}>
+          Add another&nbsp;
+        </Typography>
+        {option}
       </AddButton>
 
       <StyledMenu
diff --git a/src/pages/SelfServicePage.jsx b/src/pages/SelfServicePage.jsx
index 18e393b..76b2711 100644
--- a/src/pages/SelfServicePage.jsx
+++ b/src/pages/SelfServicePage.jsx
@@ -175,13 +175,17 @@ export default function SelfServicePage() {
                       </Box>
                     )}
                   </Box>
+                  {/* matched practitioners list */}
                   <Stack
                     direction="row"
-                    gap={1}
                     sx={{
                       pb: 2,
                       width: '100%',
-                      // bgcolor: "purple" for testing
+                      gap: {
+                        sm: "4px",
+                        md: "8px"
+                      },
+                      overflowX: "auto",
                     }}
                   >
                     {/* each individual box */}