CSS only works sometimes on dynamic image rendering in React - css

Question

I am building a recommender system for clothing and for that I am currently implementing a front-end with React. This front end is a chat in which the user can send text messages or upload an image. I dynamically render the messages from the bot (back-end) and the user (front-end). My problem is that the image behaves in an unpredictable way and first gets positioned correctly under the last message but every new messages just "ignores" the image and gets displayed wrong.
This is (part of) the react rendering output:
<div className="body">
{/* Go through the array and display every message either as user or as bot message */}
{messages.map((message, index) => {
if (message[2] === "bot") {
if (message[3] === "image") {
return (
<img
src={message[0]}
key={index}
className="image botImage"
alt="imageDisplayError"
></img>
);
}
return (
<p className="message botMessage" key={index}>
{message[0]}
</p>
);
} else {
if (message[3] === "image") {
return (
<img
src={message[0]}
key={index}
className="image usrImage"
alt="imageDisplayError"
></img>
);
} else {
return (
<p className="message usrMessage" key={index}>
{message[0]}
</p>
);
}
}
})}
</div>
This is the relevant CSS code:
.message {
padding: 10px;
width: fit-content;
border-radius: 10px;
margin-bottom: 15px;
/* Breaks messages into multiple lines */
max-width: 350px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.botMessage {
background-color: #037d7a;
color: white;
}
.usrMessage {
margin-left: auto;
background-color: #07a7a4;
}
.image {
/* padding-top: 15px; */
max-width: 350px;
max-height: 250px;
/* margin-bottom: 15px; */
}
.usrImage {
float: right;
}
This is the output (I have the inspector open so you can see the bounding boxes)
As you can see the image renders correctly under the initial message but every new messages just ignores the bounding box.
I would be grateful for ideas on how to fix this :)
I have already tried different CSS tricks with paddings and margins and so on as well as enclosing every element in a wrapper div so that an image and a text message get handled the same way.

Answer 1

The solution was posted by Nirav.
This CSS seems to do the trick:
.message {
margin: 0;
padding: 10px 18px;
width: fit-content;
border-radius: 5px;
max-width: 350px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
margin-bottom: 5px;
}
.botMessage {
background-color: #037d7a;
color: white;
}
.image {
display: flex;
max-width: 350px;
max-height: 250px;
aspect-ratio: 16/9;
object-fit: cover;
object-position: top;
border-radius: 5px;
margin-bottom: 5px;
}
.usrMessage {
margin-left: auto;
background-color: #07a7a4;
color: white;
}
.usrImage {
margin-left: auto;
}