In my chat application built with React, I am facing an issue where if a user types more than 100 characters, the message gets cut off. How can I fix this problem? Please refer to the image below for reference.
https://i.sstatic.net/DLNyH.png
{Object.keys(messages).map((keyName) => (
messages[keyName].isOut
? <div>
<div className="sender1">
{messages[keyName].content.text}
<span className="timestamp1" > {messages[keyName].date}</span>
</div>
</div>
: <div>
<p className="receiver1" >
{messages[keyName].content.text}
<span className="timestamp1" > {messages[keyName].date}</span>
</p>
</div>
))}
.sender1{
width: fit-content;
padding: 15px;
border-radius: 8px;
margin: 10px;
min-width: 60px;
padding-bottom: 26px;
position: relative;
text-align: right;
margin-left: auto;
background-color: #dcf8c6;
}
.receiver1{
background-color: whitesmoke;
width: fit-content;
padding: 15px;
border-radius: 8px;
margin: 10px;
min-width: 60px;
padding-bottom: 26px;
position: relative;
}