We are facing an issue with modals where the text of the submit button is wrapping in some cases, which is not desired. The problem can be seen in the image below.
Even though the buttons are the same size, the "Create User" text is getting wrapped.
I want to make sure that the submit button (create user) can expand to accommodate the text without wrapping, while keeping the Cancel button at its current size. Here is the code snippet for reference:
const ModalFooter = styled.div<{ numberOfButtons?: number }>`
display: flex;
justify-content: flex-end;
flex-flow: row wrap;
gap: ${theme.spacing.pixel[100]} ${theme.spacing.pixel[100]};
margin-top: ${theme.spacing.pixel[200]};
width: 100%;
:empty {
display: none;
}
& > * {
display: flex;
flex: 1 0
${({ numberOfButtons = 2 }) =>
`calc(100% / ${numberOfButtons} - ${theme.spacing.pixel[100]} * ${
numberOfButtons - 1
})`};
}
`;
I believe this behavior is due to the flex: 1 0 property. Is there a way to modify this so that only the submit button expands to prevent text wrapping, leaving the cancel button unaffected?
[1]: https://i.sstatic.net/ys7eU.png