Change the shape of the card when the screen is minimized and when the workspace consists of two words

Question

I have a project in order to organize tasks within companies, and I have a group of workspace that I must display, but when viewing the card changes the shape of the card when the screen is minimized and only when the name of the workspace consists of two words.

As it is clear in the picture, I have a workspace whose name is Heba Youssef, and we notice the change in the shape of the card style when the screen is minimized.

How can I solve this problem?

code.tsx:

interface WorkspaceCardProps {
    workspace: Workspace;
}

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

const WorkspaceCard: FC<WorkspaceCardProps> = (props) => {

    const { workspace } = props;

    const user = useAuthModule((state) => state.user.user);
  
    console.log('user workspace: ', workspace)

    console.log('user' , user.name)
    const fileSelectedHandler = event => {
        console.log(event)
    }
    

    const navigation =  useNavigate();

    const fileUploadHandler = ()=>{

    }

    return (

        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
                p: 3
            }}

        >
            <Card
                style={{maxWidth: "24rem"}}
                sx={{py: '20px'}}>
                <Box
                     sx={{
                         pl: 3,
                         pr:3,
                         pb:3,
                         pt:2
                     }}

                >

                    <Box
                        sx={{
                            alignItems: 'center',
                            display: 'flex',
                        }}
                    >
                        <Avatar
                            onClick={fileUploadHandler}
                            onChange={fileSelectedHandler}
                            style={{height: "5.6rem", width: "5.6rem"}}
                            alt="Author"
                           src="https://t4.ftcdnA25Jjm2q.jpg"
                            //    src={workspace.author.avatar}
                        >

                        </Avatar>

                        <Box sx={{ml: 2}}>
                                <Link
                                    color="textPrimary"
                                    component={RouterLink}
                                    to="#"
                                    variant="h6"
                                    style={{textAlign: "center", fontSize: "1.9rem", 
                                 paddingLeft: "0.8rem"}}
                                >
                                    {workspace.name}
                                    {/*Slark*/}
                                </Link>


                            <Typography
                                color="textSecondary"
                                variant="body2"
                                style={{textAlign: "center", paddingLeft: "0.8rem"}}
                            >
                                by
                                {'  '}
                                <Link
                                    color="textPrimary"
                                    component={RouterLink}
                                    to="#"
                                    variant="subtitle2"
                                >
                                    {user.name}
                                </Link>

                            </Typography>
                        </Box>
                    </Box>
                </Box>


                <Divider />
                <Box
                    sx={{
                        alignItems: 'center',
                        display: 'flex',
                        pl: 2,
                        pr: 3,
                        pt:2
                    }}
                >
                    <Box
                        sx={{
                            alignItems: 'center',
                            display: 'flex',
                            ml: 2
                        }}
                    >
                        <UsersIcon fontSize="small"/>
                        <Typography
                            color="textSecondary"
                            sx={{ml: 1}}
                            variant="subtitle2"
                        >
                            {/*{workspace.membersCount}*/}
                            4
                        </Typography>


                    </Box>
                    <Box sx={{
                        ml: 2
                    }}
                    >

                        <Button>
                            <a href={`/workspace-settings/settings/${workspace._id}`} >
                            <ViewComfyRoundedIcon  style={{fontSize: 30}}/>
                            </a>
                        </Button>

                    </Box>

                </Box>
            </Card>
        </Box>
    );
};

WorkspaceCard.propTypes = {
    // @ts-ignore
    workspace: PropTypes.object.isRequired
};

export default WorkspaceCard;

Answer 1

I believe you are using the Grid component. You should specify a higher value for either xs , sm , md , ... You have to guess how long a workspace name typically is and set the value(s) accordingly.

The other way to you may consider is to add noWrap the following:

<Link
  color="textPrimary"
  component={RouterLink}
  to="#"
  variant="h6"
  style={{
    textAlign: "center", fontSize: "1.9rem",
    paddingLeft: "0.8rem"
  }}
  noWrap
>
  {workspace.name}
</Link>

Although I'm not sure whether it is a good UI design, given you have left little space to display text that is potentially very long.