fix(components): same height for person cards

sws2apps · Jan 12, 2025 · 9c9dd7f · 9c9dd7f
1 parent 7f98e15
commit 9c9dd7f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/components/user_card/index.tsx b/src/components/user_card/index.tsx
@@ -46,9 +46,22 @@ const UserCard = ({
                 {female ? <UserCardFemaleImg /> : <UserCardMaleImg />}
               </StyledImgContainer>
               <StyledBoxSpaceBetween flexDirection="column">
-                <StyledBoxSpaceBetween flexDirection="row">
-                  <StyledBoxSpaceBetween flexDirection="column">
-                    <Typography className="h4">{name}</Typography>
+                <StyledBoxSpaceBetween flexDirection="row" sx={{ gap: '12px' }}>
+                  <StyledBoxSpaceBetween
+                    flexDirection="column"
+                    sx={{
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Typography
+                      className="h4"
+                      sx={{
+                        whiteSpace: 'wrap',
+                        marginBottom: '4px',
+                      }}
+                    >
+                      {name}
+                    </Typography>
                   </StyledBoxSpaceBetween>
                   {type === 'person' && onDelete && (
                     <StyledBox

diff --git a/src/components/user_card/user_card.styles.tsx b/src/components/user_card/user_card.styles.tsx
@@ -3,9 +3,11 @@ import { styled } from '@mui/system';
 
 export const StyledCardBox = styled(Box)({
   width: '100%',
+  height: '100%',
   '.MuiCard-root': {
     borderRadius: '8px',
     boxShadow: 'none',
+    height: '100%',
     border: '1px solid var(--accent-300)',
     '&:hover': {
       background: 'var(--accent-100)',
@@ -50,6 +52,7 @@ export const StyledBoxSpaceBetween = styled(Box)<{
 }>(({ flexDirection }) => ({
   display: 'flex',
   width: '100%',
+  overflow: 'hidden',
   flexDirection: flexDirection,
   justifyContent: 'space-between',
 }));