More spacing fixes

nemac · Dec 5, 2024 · 3c23357 · 3c23357
1 parent 8f7481a
commit 3c23357
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 */}