I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component:
<Typography variant="body1" sx={bubbleStyle}>
{text}
</Typography>
The styles for the bubble are defined as follows:
const bubbleStyle = {
bgcolor: fromUser ? theme.palette.primary.main : '#f1f1f1',
color: fromUser ? 'white' : 'black',
p: 1,
borderRadius: '8px',
maxWidth: '65%',
wordBreak: 'break-word',
display: 'inline-block',
my: 0,
fontFamily: 'Inter, sans-serif',
fontWeight: '100',
fontSize: '14px',
};
Currently, when the text inside the bubble exceeds a single line, the width of the bubble extends to 65%, resulting in unnecessary white space on its right side. An example of this issue can be seen in the following image:
I have already tried several solutions to address this problem, including setting width='fit-content', using hidden <div> or <span> elements, employing a ResizeObserver, creating a nested MessageComponentText component, and dynamically measuring the text with JavaScript for resizing purposes - none of which have provided a satisfactory solution.
Although I have explored similar HTML/CSS-based approaches to resolve this issue, my limited knowledge of these technologies has hindered my ability to adapt those solutions to MUI.