Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sent. However, this approach doesn't seem to be effective. I find myself puzzled by this behavior and any guidance on how to resolve it would be greatly appreciated. The code snippet below showcases my implementation, with Styled Components being used for styling.
export const ChatWindow = styled(MuiBox)`
&& {
position: absolute;
right: 0px;
bottom: 0px;
box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3);
background: ${Color.white};
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.3s ease-in-out;
border-radius: 5px;
width: ${props => (props.fullscreen ? '100%' : `${450}px`)};
height: ${props => (props.fullscreen ? '100%' : `${584}px`)};
/* max-height: 550px; */
}
`;
export const ChatWindowHeader = styled(MuiBox)`
&& {
background: ${Color.primary};
min-height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: white;
padding: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: space-between;
}
`;
export const MessageList = styled(MuiList)`
&& {
height: 80%;
overflow-y: auto;
}
`;
export const MessageListItem = styled(MuiListItem)`
&& {
margin: auto;
padding-bottom: 10px;
display: flex;
}
`;
export const MessageReceivedBubble = styled(MuiBox)`
&& {
padding: 8px 16px;
margin-bottom: 10px;
border-radius: 10px 10px 10px 2px;
font-weight: 300;
font-size: 14px;
word-wrap: break-word;
}
`;
export const MessageSentBubble = styled(MuiBox)`
&& {
padding: 8px 16px;
margin-bottom: 10px;
border-radius: 10px 10px 2px 10px;
font-weight: 300;
font-size: 14px;
word-wrap: break-word;
}
`;